:root{
    --primary:#0D9489;
    --primary-light:#14B8A6;
    --primary-dark:#0F766E;
    --primary-soft:#CCF1EE;
    --primary-hover:#14B8A6;
    --primary-active:#0F766E;
    --secondary:#0E7490;
    --secondary-light:#06B6D4;
    --secondary-dark:#0C4A6E;
    --accent:#F59E0B;
    --accent-light:#FCD34D;
    --accent-dark:#D97706;
    --success:#16A34A;
    --success-light:#22C55E;
    --success-dark:#15803D;
    --warning:#F59E0B;
    --warning-light:#FCD34D;
    --warning-dark:#D97706;
    --danger:#DC2626;
    --danger-light:#EF4444;
    --danger-dark:#B91C1C;
    --info:#0284C7;
    --info-light:#0EA5E9;
    --info-dark:#075985;
    --bg:#F8FAFC;
    --bg-light:#FFFFFF;
    --bg-dark:#F1F5F9;
    --card:#FFFFFF;
    --border:#E2E8F0;
    --border-light:#F1F5F9;
    --border-dark:#CBD5E1;
    --text:#0F172A;
    --text-light:#64748B;
    --text-muted:#94A3B8;
    --muted:#64748B;
    --gradient-primary:linear-gradient(135deg, #0D9489 0%, #14B8A6 100%);
    --gradient-accent:linear-gradient(135deg, #F59E0B 0%, #FCD34D 100%);
    --gradient-soft:linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 100%);
    --shadow-sm:0 2px 8px rgba(13, 148, 137, 0.08);
    --shadow-md:0 8px 20px rgba(13, 148, 137, 0.12);
    --shadow-lg:0 16px 40px rgba(13, 148, 137, 0.15);
    --shadow-xl:0 20px 60px rgba(13, 148, 137, 0.2);
    --shadow-soft:0 18px 40px rgba(15, 23, 42, 0.07);
    --container-max:1200px;
    --gutter:24px;
    --radius-sm:8px;
    --radius:16px;
    --radius-lg:20px;
    --radius-xl:24px;
    --breakpoint-xs:0px;
    --breakpoint-sm:576px;
    --breakpoint-md:768px;
    --breakpoint-lg:992px;
    --breakpoint-xl:1200px;
    --breakpoint-xxl:1400px;
    --space-0:0;
    --space-1:0.25rem;
    --space-2:0.5rem;
    --space-3:0.75rem;
    --space-4:1rem;
    --space-5:1.25rem;
    --space-6:1.5rem;
    --space-8:2rem;
    --space-10:2.5rem;
    --space-12:3rem;
    --space-16:4rem;
    --space-20:5rem;
    --space-24:6rem;
    --space-32:8rem;
    --text-xs:0.75rem;
    --text-sm:0.875rem;
    --text-base:1rem;
    --text-lg:1.125rem;
    --text-xl:1.25rem;
    --text-2xl:1.5rem;
    --text-3xl:1.875rem;
    --text-4xl:2.25rem;
    --text-5xl:3rem;
    --text-6xl:3.75rem;
    --font-light:300;
    --font-normal:400;
    --font-medium:500;
    --font-semibold:600;
    --font-bold:700;
    --font-extrabold:800;
    --font-black:900;
    --leading-none:1;
    --leading-tight:1.25;
    --leading-snug:1.375;
    --leading-normal:1.5;
    --leading-relaxed:1.625;
    --leading-loose:2;
    --font-sans:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-serif:Georgia, Cambria, 'Times New Roman', Times, serif;
    --font-mono:'Fira Code', 'Courier New', Consolas, Monaco, monospace}
/* Hero Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Gradient Text */
.gradient-text {
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

*{
    box-sizing:border-box}
body{
    font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background:var(--bg);
    color:var(--text);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    line-height:1.6;
    margin:0;
    padding:0}
html{
    scroll-behavior:smooth}
a{
    text-decoration:none;
    color:inherit}
main{
    padding-top:0;
    min-height:100vh}
h1,
h2,
h3,
h4,
h5,
h6{
    font-weight:700;
    color:var(--text);
    line-height:1.2;
    margin:0}
.container{
    max-width:var(--container-max) !important;
    margin:0 auto;
    padding:0 var(--gutter) !important}
.container-xxl,
.container-xl,
.container-lg,
.container-md,
.container-sm{
    max-width:var(--container-max) !important;
    padding:0 var(--gutter) !important}
.navbar-modern{
    background:white !important;
    box-shadow:0 2px 12px rgba(15, 23, 42, 0.08);
    padding:16px 0 !important;
    position:sticky;
    top:0;
    z-index:1000;
    transition:all 0.3s ease}
.navbar-modern.scrolled{
    padding:12px 0 !important;
    box-shadow:0 4px 20px rgba(15, 23, 42, 0.12)}
.navbar-modern .container{
    padding-left:var(--gutter) !important;
    padding-right:var(--gutter) !important}
.navbar-favicon{
    height:36px;
    width:36px;
    transition:all 0.3s ease;
    object-fit:contain}
.navbar-logo-img{
    height:36px;
    width:auto;
    max-width:150px;
    transition:all 0.3s ease;
    object-fit:contain}
.navbar-brand{
    display:flex;
    align-items:center;
    gap:8px;
    text-decoration:none}
.navbar-brand-text{
    font-size:22px;
    font-weight:800;
    color:var(--primary-dark);
    transition:all 0.3s ease}
@media (max-width:768px){
    .navbar-favicon{
        height:32px;
        width:32px}
    .navbar-logo-img{
        height:32px}
}
.navbar-brand:hover .navbar-favicon{
    transform:rotate(360deg) scale(1.1)}
.navbar-brand:hover .navbar-logo-img{
    transform:scale(1.05)}
.navbar-brand:hover .navbar-brand-text{
    color:var(--primary)}
.navbar-modern .nav-link{
    color:var(--text) !important;
    font-weight:600;
    font-size:15px;
    padding:10px 16px !important;
    border-radius:10px;
    transition:all 0.3s ease;
    display:flex;
    align-items:center;
    gap:8px;
    margin:0 4px;
    position:relative}
.navbar-modern .nav-link .nav-icon{
    font-size:20px;
    transition:all 0.3s ease}
.navbar-modern .nav-link:hover{
    background:var(--primary-soft);
    color:var(--primary-dark) !important;
    transform:translateY(-2px)}
.navbar-modern .nav-link:hover .nav-icon{
    transform:scale(1.1)}
.navbar-modern .nav-link.active{
    background:var(--primary-soft);
    color:var(--primary-dark) !important}
.navbar-modern .nav-link.active::after{
    content:'';
    position:absolute;
    bottom:0;
    left:50%;
    transform:translateX(-50%);
    width:30px;
    height:3px;
    background:var(--primary);
    border-radius:3px 3px 0 0}
.navbar-modern .nav-cta{
    background:linear-gradient(135deg, var(--primary), var(--primary-light));
    color:white !important;
    font-weight:700;
    box-shadow:var(--shadow-md);
    margin-left:8px}
.navbar-modern .nav-cta:hover{
    background:linear-gradient(135deg, var(--primary-light), var(--primary));
    color:white !important;
    transform:translateY(-2px);
    box-shadow:var(--shadow-lg)}
.navbar-modern .nav-cta .nav-icon{
    color:white}
.dropdown-menu-modern{
    border:1px solid var(--border);
    border-radius:12px;
    box-shadow:0 8px 30px rgba(15, 23, 42, 0.12);
    padding:8px;
    margin-top:8px;
    min-width:320px}
.dropdown-menu-modern .dropdown-item{
    border-radius:8px;
    padding:12px 16px;
    transition:all 0.2s ease;
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:4px}
.dropdown-menu-modern .dropdown-item:hover{
    background:var(--primary-soft);
    color:var(--primary-dark)}
.dropdown-menu-modern .dropdown-icon{
    font-size:24px;
    color:var(--primary);
    flex-shrink:0}
.dropdown-menu-modern .dropdown-title{
    font-weight:600;
    font-size:15px;
    color:var(--text);
    margin-bottom:2px}
.dropdown-menu-modern .dropdown-subtitle{
    font-size:13px;
    color:var(--muted);
    display:block;
    line-height:1.4}
.navbar-toggler{
    border:1px solid var(--border);
    padding:6px;
    border-radius:8px;
    transition:all 0.3s ease;
    background:linear-gradient(135deg, rgba(204, 241, 238, 0.4), rgba(255, 255, 255, 0.6));
    backdrop-filter:blur(10px);
    box-shadow:var(--shadow-sm);
    width:40px;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center}
.navbar-toggler:hover{
    background:linear-gradient(135deg, var(--primary-soft), rgba(204, 241, 238, 0.8));
    border-color:var(--primary);
    transform:translateY(-2px);
    box-shadow:var(--shadow-md)}
.navbar-toggler:focus{
    box-shadow:0 0 0 4px color-mix(in srgb, var(--primary) 15%, transparent);
    border-color:var(--primary)}
.navbar-toggler .iconify{
    color:var(--primary-dark);
    width:24px;
    height:24px}
@media (max-width:991px){
    .navbar-modern .navbar-collapse{
        margin-top:16px;
        padding:16px;
        background:var(--bg);
        border-radius:12px;
        box-shadow:0 4px 20px rgba(15, 23, 42, 0.08)}
    .navbar-modern .nav-link{
        margin:4px 0;
        justify-content:flex-start}
    .navbar-modern .nav-link.active::after{
        display:none}
    .navbar-modern .nav-cta{
        margin-left:0;
        margin-top:8px;
        justify-content:center}
    .dropdown-menu-modern{
        border:none;
        box-shadow:none;
        background:transparent;
        padding:0;
        margin-top:4px;
        min-width:100%}
    .dropdown-menu-modern .dropdown-item{
        background:white;
        margin-bottom:8px;
        box-shadow:0 2px 8px rgba(15, 23, 42, 0.06)}
}
.btn{
    border-radius:12px;
    padding:12px 24px;
    font-weight:600;
    font-size:15px;
    transition:all 0.3s ease;
    border:none;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    gap:8px}
.btn-icon{
    width:20px;
    height:20px;
    flex-shrink:0;
    transition:transform 0.3s ease}
.btn:hover .btn-icon{
    transform:scale(1.1)}
.btn-text-full{
    display:inline}
.btn-text-short{
    display:none}
.btn-primary{
    background:linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    color:white;
    border:none;
    box-shadow:0 8px 20px color-mix(in srgb, var(--primary) 25%, transparent)}
.btn-primary:hover{
    background:linear-gradient(135deg, var(--primary-light) 0%, var(--accent) 100%);
    color:white;
    transform:translateY(-3px);
    box-shadow:0 12px 30px color-mix(in srgb, var(--primary-light) 35%, transparent)}
.btn-outline-primary{
    background:transparent;
    border:2px solid var(--primary);
    color:var(--primary)}
.btn-outline-primary:hover{
    background:linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    border-color:transparent;
    color:white;
    transform:translateY(-2px);
    box-shadow:var(--shadow-md)}
.hero{
    display:grid;
    grid-template-columns:repeat(12, 1fr);
    gap:24px;
    align-items:center;
    padding-top:70px !important;
    padding-bottom:80px !important;
    margin-top:0;
    overflow:hidden;
    width:100%;
    position:relative}
.tech-icons-float{
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    pointer-events:none;
    z-index:0}
.tech-icon{
    position:absolute;
    opacity:0.15;
    transition:all 0.3s ease;
    filter:grayscale(0.3)}
.tech-icon:hover{
    opacity:0.8;
    filter:grayscale(0);
    transform:scale(1.2)}
.tech-1{
    top:10%;
    left:5%;
    animation:float-tech 8s ease-in-out infinite}
.tech-2{
    top:20%;
    right:8%;
    animation:float-tech 10s ease-in-out infinite reverse;
    animation-delay:1s}
.tech-3{
    top:45%;
    left:3%;
    animation:float-tech 12s ease-in-out infinite;
    animation-delay:2s}
.tech-4{
    top:60%;
    right:5%;
    animation:float-tech 9s ease-in-out infinite reverse;
    animation-delay:0.5s}
.tech-5{
    top:75%;
    left:8%;
    animation:float-tech 11s ease-in-out infinite;
    animation-delay:1.5s}
.tech-6{
    top:15%;
    left:50%;
    animation:float-tech 13s ease-in-out infinite reverse;
    animation-delay:2.5s}
.tech-7{
    top:50%;
    right:15%;
    animation:float-tech 10s ease-in-out infinite;
    animation-delay:3s}
.tech-8{
    top:80%;
    right:20%;
    animation:float-tech 14s ease-in-out infinite reverse;
    animation-delay:1s}
.tech-9{
    top:35%;
    left:15%;
    animation:float-tech 9s ease-in-out infinite;
    animation-delay:2s}
.tech-10{
    top:65%;
    left:45%;
    animation:float-tech 11s ease-in-out infinite reverse;
    animation-delay:0.5s}
@keyframes float-tech{
    0%,
    100%{
        transform:translateY(0) rotate(0deg)}
    25%{
        transform:translateY(-20px) rotate(5deg)}
    50%{
        transform:translateY(-10px) rotate(-5deg)}
    75%{
        transform:translateY(-15px) rotate(3deg)}
}
.hero-left,
.hero-right{
    position:relative;
    z-index:1}
.hero-left{
    grid-column:span 7;
    max-width:100%;
    overflow:hidden;
    position:relative;
    z-index:1}
.hero-right{
    grid-column:span 5;
    display:flex;
    justify-content:center;
    align-items:center}
.badge-premium{
    display:inline-flex;
    align-items:center;
    animation: fadeInUp 0.6s ease-out;
    gap:8px;
    background:linear-gradient(135deg, var(--primary-soft), rgba(204, 241, 238, 0.5));
    border:1.5px solid var(--primary);
    border-radius:50px;
    padding:8px 18px;
    margin-bottom:16px;
    box-shadow:var(--shadow-md);
    backdrop-filter:blur(10px);
    position:relative;
    z-index:10}
.badge-icon{
    font-size:16px;
    animation:badge-sparkle 2s ease-in-out infinite}
.badge-text{
    color:var(--primary-dark);
    font-weight:700;
    font-size:13px;
    letter-spacing:0.03em;
    text-transform:uppercase}
.badge-rotating{
    display:inline-block;
    min-width:140px;
    text-align:left;
    transition:all 0.3s ease}
@keyframes badge-float{
    0%,
    100%{
        transform:translateY(0px)}
    50%{
        transform:translateY(-4px)}
}
@keyframes badge-sparkle{
    0%,
    100%{
        transform:scale(1) rotate(0deg);
        opacity:1}
    50%{
        transform:scale(1.2) rotate(10deg);
        opacity:0.8}
}
.h1{
    font-size:48px;
    line-height:1.1;
    margin:0 0 18px;
    font-weight:700;
    color:var(--text);
    animation: fadeInUp 0.8s ease-out 0.2s backwards;}
.sub{
    color:var(--muted);
    font-size:17px;
    margin:0 0 22px;
    max-width:620px;
    line-height:1.7;
    animation: fadeInUp 0.8s ease-out 0.4s backwards;}
.cta-group{
    display:flex;
    gap:14px;
    margin-bottom:22px;
    flex-wrap:wrap;
    animation: fadeInUp 0.8s ease-out 0.6s backwards;}
.btn-outline{
    background:white;
    color:var(--primary);
    border:2px solid var(--primary);
    box-shadow:0 4px 12px color-mix(in srgb, var(--primary) 10%, transparent)}
.btn-outline:hover{
    background:linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    color:white;
    border-color:transparent;
    transform:translateY(-3px);
    box-shadow:0 12px 30px color-mix(in srgb, var(--primary) 30%, transparent)}
.trustline{
    display:flex;
    gap:18px;
    align-items:center;
    color:var(--muted);
    font-size:14px;
    margin-top:6px;
    flex-wrap:wrap;
    animation: fadeInUp 0.8s ease-out 0.8s backwards;}
.trustline img{
    height:20px;
    opacity:0.9}
.mockup-wrap{
    width:100%;
    max-width:480px;
    border-radius:18px;
    background:var(--primary-soft);
    padding:28px;
    box-shadow:var(--shadow-soft);
    display:flex;
    justify-content:center;
    align-items:center;
    animation: fadeIn 1s ease-out 0.3s backwards;}
.mockup{
    width:100%;
    border-radius:12px;
    overflow:hidden;
    background:var(--card);
    border:1px solid var(--border)}
.mockup img{
    display:block;
    width:100%;
    height:auto;
    object-fit:cover}
.values{
    display:flex;
    margin:28px 0 36px;
    animation: fadeIn 1s ease-out 1s backwards;
    position:relative;
    overflow:hidden;
    width:100%;
    max-width:100%}
.values-track{
    display:flex;
    gap:18px;
    animation:slide-chips 20s linear infinite;
    will-change:transform}
.values-track:hover{
    animation-play-state:paused}
@keyframes slide-chips{
    0%{
        transform:translateX(0)}
    100%{
        transform:translateX(calc(-50% - 9px))}
}
.chip{
    background:var(--card);
    padding:12px 18px;
    border-radius:12px;
    box-shadow:var(--shadow-soft);
    border:1px solid var(--border);
    display:inline-flex;
    gap:12px;
    align-items:center;
    font-weight:600;
    font-size:14px;
    flex-shrink:0;
    white-space:nowrap;
    transition:all 0.3s ease;
    max-width:max-content}
.chip:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow-md)}
.chip .icon{
    width:36px;
    height:36px;
    border-radius:10px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:white;
    font-size:16px;
    flex-shrink:0;
    animation:icon-bounce 0.6s ease}
@keyframes icon-bounce{
    0%,
    100%{
        transform:scale(1)}
    50%{
        transform:scale(1.2)}
}
.chip .i-1{
    background:linear-gradient(135deg, var(--primary), var(--primary-light))}
.chip .i-2{
    background:linear-gradient(135deg, var(--secondary), var(--primary-dark))}
.chip .i-3{
    background:linear-gradient(135deg, var(--accent), #FFD28A)}
.chip .i-4{
    background:linear-gradient(135deg, var(--primary-dark), var(--secondary))}
.story{
    display:grid;
    grid-template-columns:repeat(12, 1fr);
    gap:24px;
    align-items:center;
    padding:40px 0}
.story-left{
    grid-column:span 7}
.story-right{
    grid-column:span 5}
.story-card{
    background:var(--primary-soft);
    padding:28px;
    border-radius:14px;
    border:1px solid rgba(15, 118, 110, 0.06)}
.services{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
    margin:32px 0}
.service-card{
    background:var(--card);
    border-radius:14px;
    padding:22px;
    border:1px solid var(--border);
    box-shadow:var(--shadow-soft);
    transition:transform 0.2s}
.service-card:hover{
    transform:translateY(-4px)}
.service-title{
    font-weight:700;
    color:var(--text);
    margin-bottom:10px;
    font-size:18px}
.service-list{
    color:var(--muted);
    margin:10px 0 18px;
    line-height:1.8}
.service-link{
    color:var(--primary-dark);
    font-weight:700;
    transition:color 0.2s}
.service-link:hover{
    color:var(--primary-light)}
.gallery{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:16px;
    margin:28px 0}
.p-card{
    background:var(--card);
    border-radius:12px;
    overflow:hidden;
    border:1px solid var(--border);
    transition:transform 0.22s;
    box-shadow:var(--shadow-soft)}
.p-card img{
    width:100%;
    height:220px;
    object-fit:cover;
    display:block}
.p-card:hover{
    transform:translateY(-6px)}
.p-meta{
    padding:12px 14px}
.p-title{
    font-weight:700;
    margin:0 0 6px;
    color:var(--text)}
.p-sub{
    color:var(--muted);
    font-size:14px}
.testimonials{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:18px;
    margin:28px 0}
.testi{
    background:var(--card);
    padding:20px;
    border-radius:12px;
    border:1px solid var(--border);
    box-shadow:var(--shadow-soft)}
.testi p{
    font-style:italic;
    color:var(--text);
    margin:0 0 12px;
    line-height:1.6}
.testi .who{
    font-weight:700;
    color:var(--primary-dark);
    font-size:14px}
.steps{
    display:flex;
    gap:16px;
    align-items:stretch;
    margin:32px 0}
.step{
    background:var(--card);
    padding:16px;
    border-radius:12px;
    border:1px solid var(--border);
    flex:1;
    display:flex;
    gap:12px;
    align-items:flex-start;
    box-shadow:var(--shadow-soft)}
.step .num{
    width:44px;
    height:44px;
    background:var(--primary-dark);
    color:white;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    font-weight:800;
    flex-shrink:0}
.step .s-title{
    font-weight:700;
    margin:0 0 6px;
    color:var(--text)}
.step .s-desc{
    color:var(--muted);
    font-size:14px}
.cta-block{
    background:var(--primary-dark);
    color:white;
    padding:42px;
    border-radius:14px;
    text-align:center;
    margin:36px 0}
.cta-block h3{
    margin:0 0 10px;
    font-size:22px}
.cta-block p{
    color:rgba(255, 255, 255, 0.85);
    margin:0 0 18px}
.cta-block .btn-cta{
    background:var(--accent);
    color:var(--text);
    padding:12px 22px;
    border-radius:12px;
    font-weight:800;
    display:inline-block;
    transition:all 0.2s;
    text-decoration:none}
.cta-block .btn-cta:hover{
    transform:translateY(-3px);
    box-shadow:0 10px 30px color-mix(in srgb, var(--accent) 30%, transparent)}
.faq{
    margin:26px 0}
.faq-item{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:12px;
    padding:14px;
    margin-bottom:10px;
    box-shadow:var(--shadow-soft)}
.faq-item strong{
    color:var(--text)}
.section-header{
    text-align:center;
    max-width:700px;
    margin:0 auto 60px}
.section-title,
.about-title,
.feature-title,
.solution-title{
    font-size:42px !important;
    font-weight:800;
    color:var(--text);
    margin-bottom:16px;
    line-height:1.2}
.section-desc,
.about-desc,
.feature-subtitle,
.solution-description{
    font-size:18px !important;
    color:var(--text-light);
    line-height:1.7;
    margin-bottom:0}
@media (max-width:991px){
    .section-title,
    .about-title,
    .feature-title,
    .solution-title{
        font-size:36px !important}
    .section-desc,
    .about-desc,
    .feature-subtitle,
    .solution-description{
        font-size:17px !important}
}
@media (max-width:768px){
    .section-title,
    .about-title,
    .feature-title,
    .solution-title{
        font-size:32px !important}
    .section-desc,
    .about-desc,
    .feature-subtitle,
    .solution-description{
        font-size:16px !important}
    .amount{
        font-size:36px !important}
    .currency{
        font-size:18px !important}
    .pricing-card:nth-child(2){
        margin-top:32px !important}
}
@media (max-width:480px){
    .section-title,
    .about-title,
    .feature-title,
    .solution-title{
        font-size:28px !important}
    .section-desc,
    .about-desc,
    .feature-subtitle,
    .solution-description{
        font-size:15px !important}
}
.section-header h2{
    margin:0;
    color:var(--text);
    font-size:28px}
.section-header small{
    color:var(--muted)}
.contact-grid{
    display:grid;
    grid-template-columns:1fr 360px;
    gap:24px;
    align-items:start}
.contact-card{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:12px;
    padding:16px;
    box-shadow:var(--shadow-soft)}
.contact-card h4{
    margin:0 0 8px;
    color:var(--text)}
.contact-card p{
    color:var(--muted);
    margin:0 0 8px}
.contact-card a{
    color:var(--primary-dark);
    font-weight:600}
.contact-card a:hover{
    color:var(--primary-light)}
.footer-modern{
    background:linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 50%, var(--primary-light) 100%);
    color:white;
    padding:0;
    margin-top:80px;
    position:relative;
    overflow:hidden}
.footer-wave{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    overflow:hidden;
    line-height:0;
    transform:translateY(-99%)}
.footer-wave svg{
    position:relative;
    display:block;
    width:calc(100% + 1.3px);
    height:120px}
.footer-wave .wave-path{
    fill:#0A5F5A;
    animation:wave 10s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite;
    transform-origin:50% 50%}
@keyframes wave{
    0%,
    100%{
        d:path("M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z")}
    50%{
        d:path("M321.39,70c58-10.79,114.16-20,172-30,82.39-16.72,168.19-17.73,250.45-.39C823.78,45,906.67,85,985.66,105c70.05,18.48,146.53,26.09,214.34,3V0H0V40A600.21,600.21,0,0,0,321.39,70Z")}
}
.footer-particles{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    overflow:hidden;
    z-index:0}
.particle{
    position:absolute;
    width:4px;
    height:4px;
    background:rgba(255, 255, 255, 0.3);
    border-radius:50%;
    animation:float-particle 15s infinite}
.particle:nth-child(1){
    left:10%;
    animation-delay:0s;
    animation-duration:12s}
.particle:nth-child(2){
    left:30%;
    animation-delay:2s;
    animation-duration:15s}
.particle:nth-child(3){
    left:50%;
    animation-delay:4s;
    animation-duration:18s}
.particle:nth-child(4){
    left:70%;
    animation-delay:6s;
    animation-duration:14s}
.particle:nth-child(5){
    left:90%;
    animation-delay:8s;
    animation-duration:16s}
@keyframes float-particle{
    0%{
        transform:translateY(100vh) scale(0);
        opacity:0}
    10%{
        opacity:1}
    90%{
        opacity:1}
    100%{
        transform:translateY(-100px) scale(1);
        opacity:0}
}
.footer-content{
    position:relative;
    z-index:1;
    padding:80px 0 0}
.footer-logo-icon{
    height:48px;
    width:48px;
    filter:drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
    object-fit:contain}
.footer-logo-img{
    height:48px;
    width:auto;
    max-width:180px;
    filter:drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
    object-fit:contain}
.footer-logo-text{
    font-size:28px;
    font-weight:800;
    color:white;
    text-shadow:0 2px 4px rgba(0, 0, 0, 0.2)}
.footer-description{
    color:rgba(255, 255, 255, 0.8);
    font-size:14px;
    line-height:1.7;
    margin-bottom:20px}
.footer-title{
    font-size:18px;
    font-weight:700;
    color:white;
    margin-bottom:24px;
    position:relative;
    padding-bottom:12px;
    display:flex;
    align-items:center;
    gap:8px}
.footer-title-icon{
    font-size:22px;
    color:var(--accent)}
.footer-title::after{
    content:'';
    position:absolute;
    bottom:0;
    left:0;
    width:50px;
    height:3px;
    background:linear-gradient(90deg, var(--accent), transparent);
    border-radius:3px}
.footer-links{
    list-style:none;
    padding:0;
    margin:0}
.footer-links li{
    margin-bottom:14px}
.footer-links a{
    color:rgba(255, 255, 255, 0.85);
    text-decoration:none;
    font-size:15px;
    transition:all 0.3s ease;
    display:inline-flex;
    align-items:center;
    gap:10px}
.footer-links a .iconify{
    font-size:18px;
    color:rgba(255, 255, 255, 0.6);
    transition:all 0.3s ease}
.footer-links a:hover{
    color:white;
    transform:translateX(6px)}
.footer-links a:hover .iconify{
    color:var(--accent);
    transform:scale(1.2)}
.footer-contact{
    list-style:none;
    padding:0;
    margin:0}
.footer-contact li{
    margin-bottom:16px;
    display:flex;
    align-items:center;
    gap:12px;
    transition:all 0.3s ease}
.footer-contact .contact-icon{
    font-size:20px;
    color:rgba(255, 255, 255, 0.6);
    flex-shrink:0;
    transition:all 0.3s ease}
.footer-contact a{
    color:rgba(255, 255, 255, 0.85);
    text-decoration:none;
    font-size:15px;
    transition:all 0.3s ease}
.footer-contact li:hover .contact-icon{
    color:var(--accent);
    transform:scale(1.2)}
.footer-contact li:hover a{
    color:white;
    transform:translateX(6px)}
.footer-social{
    display:flex;
    gap:12px;
    margin-top:20px}
.social-link{
    width:40px;
    height:40px;
    border-radius:10px;
    background:rgba(255, 255, 255, 0.1);
    display:flex;
    align-items:center;
    justify-content:center;
    color:white;
    text-decoration:none;
    transition:all 0.3s ease;
    backdrop-filter:blur(10px)}
.social-link:hover{
    background:var(--accent);
    transform:translateY(-4px);
    box-shadow:0 8px 20px color-mix(in srgb, var(--accent) 30%, transparent)}
.footer-bottom{
    margin-top:50px;
    padding:24px 0;
    border-top:1px solid rgba(255, 255, 255, 0.1)}
.footer-copyright,
.footer-tagline{
    color:rgba(255, 255, 255, 0.7);
    font-size:14px}
.footer-tagline .iconify{
    display:inline-block;
    animation:heartbeat 1.5s ease-in-out infinite}
@keyframes heartbeat{
    0%,
    100%{
        transform:scale(1)}
    25%{
        transform:scale(1.2)}
    50%{
        transform:scale(1)}
}
@media (max-width:1024px){
    .hero{
        grid-template-columns:repeat(8, 1fr)}
    .hero-left{
        grid-column:span 5}
    .hero-right{
        grid-column:span 3}
    .story{
        grid-template-columns:repeat(8, 1fr)}
    .story-left{
        grid-column:span 5}
    .story-right{
        grid-column:span 3}
    .gallery{
        grid-template-columns:repeat(2, 1fr)}
    .testimonials{
        grid-template-columns:repeat(2, 1fr)}
    .steps{
        flex-direction:column}
}
@media (max-width:991px){
    .hero{
        grid-template-columns:1fr;
        gap:40px;
        padding-top:60px !important;
        padding-bottom:60px !important}
    .hero-left,
    .hero-right{
        grid-column:auto}
    .hero-left{
        text-align:center}
    .hero-right{
        order:-1;
        display:flex;
        justify-content:center}
    .h1{
        font-size:36px;
        line-height:1.2}
    .sub{
        font-size:16px;
        max-width:100%}
    .badge-premium{
        margin:0 auto 16px}
    .cta-group{
        justify-content:center}
    .trustline{
        justify-content:center;
        text-align:center}
    .code-editor-mockup{
        max-width:600px}
    .rotating-text{
        display:block;
        text-align:center;
        min-width:auto;
        width:100%}
    .rotating-text::before{
        left:50%;
        transform:translateX(-50%) scaleX(1);
        width:180px}
    @keyframes pulse-line{
        0%,
        100%{
            opacity:1;
            transform:translateX(-50%) scaleX(1)}
        50%{
            opacity:0.6;
            transform:translateX(-50%) scaleX(0.95)}
    }
}
@media (max-width:768px){
    .container{
        padding:0 20px}
    .hero{
        grid-template-columns:1fr;
        gap:30px;
        padding-top:40px !important;
        padding-bottom:40px !important}
    .hero-left{
        grid-column:auto;
        text-align:center}
    .hero-right{
        grid-column:auto;
        margin-top:0;
        order:2}
    .h1{
        font-size:28px;
        line-height:1.2}
    .sub{
        font-size:15px;
        max-width:100%}
    .badge-premium{
        justify-content:center;
        margin:0 auto 16px}
    .cta-group{
        flex-direction:row;
        width:100%;
        gap:10px;
        justify-content:center}
    .btn{
        flex:1;
        justify-content:center;
        padding:14px 16px;
        font-size:14px;
        gap:6px}
    .btn-icon{
        width:18px;
        height:18px}
    .btn-text-full{
        display:none}
    .btn-text-short{
        display:inline}
    .trustline{
        justify-content:center;
        text-align:center;
        flex-wrap:wrap}
    .values{
        margin:20px 0 30px}
    .values-track{
        gap:12px}
    .chip{
        padding:10px 16px;
        font-size:13px}
    .chip .icon{
        width:32px;
        height:32px;
        font-size:14px}
    .code-editor-mockup{
        max-width:100%}
    .editor-content{
        min-height:220px}
    .code-lines,
    .line-numbers{
        font-size:12px}
    .story{
        grid-template-columns:1fr}
    .story-left,
    .story-right{
        grid-column:auto}
    .services{
        grid-template-columns:1fr}
    .gallery{
        grid-template-columns:1fr}
    .testimonials{
        grid-template-columns:1fr}
    .contact-grid{
        grid-template-columns:1fr}
    .footer-modern{
        padding:40px 0 0;
        margin-top:60px}
    .footer-content{
        padding:40px 0 0}
    .footer-title{
        margin-top:12px;
        margin-bottom:16px;
        font-size:16px}
    .footer-bottom{
        margin-top:24px;
        text-align:center}
    .footer-copyright,
    .footer-tagline{
        margin-bottom:8px !important}
    .footer-links li{
        margin-bottom:10px}
}
@media (max-width:480px){
    .h1{
        font-size:24px}
    .sub{
        font-size:14px}
    .badge-premium{
        padding:6px 14px}
    .badge-text{
        font-size:11px}
    .badge-icon{
        font-size:14px}
    .chip{
        padding:8px 14px;
        font-size:12px;
        gap:8px}
    .chip .icon{
        width:28px;
        height:28px;
        font-size:13px}
    .values{
        margin:16px 0 24px}
    .values-track{
        gap:10px}
    .btn{
        padding:12px 14px;
        font-size:13px;
        gap:5px}
    .btn-icon{
        width:16px;
        height:16px}
    .cta-group{
        gap:8px}
    .rotating-text{
        min-width:150px;
        font-size:inherit}
}
.btn:focus,
.btn:active,
a:focus{
    outline:none;
    box-shadow:0 0 0 4px color-mix(in srgb, var(--primary-light) 12%, transparent)}
.rotating-text{
    color:var(--accent-light);
    font-weight:800;
    display:inline-block;
    min-width:180px;
    text-align:left;
    transition:all 0.3s ease;
    position:relative}
.rotating-text::before{
    content:'';
    position:absolute;
    bottom:-4px;
    left:0;
    width:100%;
    height:3px;
    background:var(--accent-light);
    border-radius:2px;
    animation:pulse-line 3s infinite}
@keyframes pulse-line{
    0%,
    100%{
        opacity:1;
        transform:scaleX(1)}
    50%{
        opacity:0.6;
        transform:scaleX(0.95)}
}
@media (max-width:768px){
    .rotating-text{
        display:block;
        text-align:center;
        min-width:auto;
        width:100%}
    .rotating-text::before{
        left:50%;
        transform:translateX(-50%) scaleX(1);
        width:150px}
    @keyframes pulse-line{
        0%,
        100%{
            opacity:1;
            transform:translateX(-50%) scaleX(1)}
        50%{
            opacity:0.6;
            transform:translateX(-50%) scaleX(0.95)}
    }
}
.about-section{
    padding:80px 0;
    background:white;
    position:relative;
    overflow:hidden}
.about-section::before{
    content:'';
    position:absolute;
    top:0;
    right:-200px;
    width:500px;
    height:500px;
    background:radial-gradient(circle, color-mix(in srgb, var(--primary) 5%, transparent), transparent);
    border-radius:50%;
    pointer-events:none}
.about-content{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:center;
    position:relative;
    z-index:1}
.about-left{
    position:relative;
    z-index:1}
.video-decoration{
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    pointer-events:none;
    z-index:-1}
.deco-circle{
    position:absolute;
    border-radius:50%;
    background:linear-gradient(135deg, var(--accent), var(--accent-light));
    opacity:0.15;
    animation:float 6s ease-in-out infinite}
.deco-1{
    width:120px;
    height:120px;
    top:-40px;
    right:-40px;
    animation-delay:0s}
.deco-2{
    width:80px;
    height:80px;
    bottom:-20px;
    left:-20px;
    background:linear-gradient(135deg, var(--primary-light), var(--primary));
    animation-delay:2s}
.deco-square{
    position:absolute;
    width:60px;
    height:60px;
    background:linear-gradient(135deg, var(--accent-light), var(--accent));
    opacity:0.12;
    border-radius:12px;
    top:50%;
    right:-30px;
    transform:rotate(45deg);
    animation:rotate-float 8s ease-in-out infinite}
.deco-line{
    position:absolute;
    width:100px;
    height:4px;
    background:linear-gradient(90deg, transparent, var(--primary-light), transparent);
    opacity:0.3;
    bottom:30%;
    left:-50px;
    border-radius:2px;
    animation:slide 5s ease-in-out infinite}
@keyframes float{
    0%,
    100%{
        transform:translateY(0) scale(1)}
    50%{
        transform:translateY(-20px) scale(1.05)}
}
@keyframes rotate-float{
    0%,
    100%{
        transform:rotate(45deg) translateY(0)}
    50%{
        transform:rotate(65deg) translateY(-15px)}
}
@keyframes slide{
    0%,
    100%{
        transform:translateX(0);
        opacity:0.3}
    50%{
        transform:translateX(20px);
        opacity:0.6}
}
.video-wrapper{
    position:relative;
    border-radius:24px;
    overflow:hidden;
    box-shadow:0 20px 60px color-mix(in srgb, var(--primary) 15%, transparent);
    background:var(--primary);
    padding:20px;
    z-index:1}
.youtube-embed{
    position:relative;
    padding-bottom:56.25%;
    height:0;
    overflow:hidden;
    border-radius:24px}
.youtube-embed iframe{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    border-radius:24px}
.about-right{
    padding-left:20px}
.section-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 20px;
    background:linear-gradient(135deg, color-mix(in srgb, var(--primary) 10%, transparent), color-mix(in srgb, var(--primary-light) 10%, transparent));
    border:1px solid color-mix(in srgb, var(--primary) 20%, transparent);
    border-radius:50px;
    font-size:14px;
    font-weight:700;
    color:var(--primary);
    margin-bottom:16px;
    text-transform:uppercase;
    letter-spacing:0.5px;
    transition:all 0.3s ease}
.section-badge.light{
    background:rgba(255, 255, 255, 0.15);
    border-color:rgba(255, 255, 255, 0.3);
    color:white}
.badge-animated{
    animation:badge-glow 3s ease-in-out infinite;
    position:relative;
    overflow:hidden;
    border-radius:50px}
.badge-animated::before{
    content:'';
    position:absolute;
    top:0;
    left:-100%;
    width:100%;
    height:100%;
    background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--primary-light) 30%, transparent), transparent);
    animation:badge-shine 3s ease-in-out infinite;
    border-radius:50px}
.badge-icon{
    color: var(--accent) !important;
    animation:badge-icon-rotate 4s ease-in-out infinite}
@keyframes badge-glow{
    0%,
    100%{
        box-shadow:0 0 0 0 color-mix(in srgb, var(--primary) 30%, transparent)}
    50%{
        box-shadow:0 0 20px color-mix(in srgb, var(--primary) 40%, transparent)}
}
@keyframes badge-shine{
    0%{
        left:-100%}
    50%,
    100%{
        left:100%}
}
@keyframes badge-icon-rotate{
    0%,
    100%{
        transform:rotate(0deg)}
    25%{
        transform:rotate(-10deg)}
    75%{
        transform:rotate(10deg)}
}
.about-title{
    color:var(--text);
    margin-bottom:12px;
    line-height:1.2}
.about-subtitle{
    font-size:20px;
    font-weight:700;
    color:var(--primary);
    margin-bottom:20px}
.about-desc{
    font-size:16px;
    color:var(--text-light);
    line-height:1.8;
    margin-bottom:32px}
.about-values{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:24px;
    margin-bottom:32px}
.value-item{
    display:flex;
    gap:16px;
    padding:20px;
    background:linear-gradient(135deg, color-mix(in srgb, var(--primary) 3%, transparent), color-mix(in srgb, var(--primary-light) 3%, transparent));
    border-radius:16px;
    border:1px solid var(--border-light);
    transition:all 0.3s ease}
.value-item:hover{
    transform:translateY(-4px);
    box-shadow:0 12px 24px color-mix(in srgb, var(--primary) 12%, transparent);
    border-color:var(--primary-light)}
.value-icon{
    width:56px;
    height:56px;
    background:linear-gradient(135deg, var(--accent), var(--accent-light));
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:white;
    flex-shrink:0;
    transition:all 0.3s ease;
    animation:icon-pulse 3s ease-in-out infinite}
.value-icon .iconify{
    animation:icon-bounce 2s ease-in-out infinite}
.value-item:hover .value-icon{
    transform:rotate(-5deg) scale(1.05);
    background:linear-gradient(135deg, var(--primary), var(--primary-light));
    animation:none}
.value-item:hover .value-icon .iconify{
    animation:icon-spin 0.6s ease-in-out}
@keyframes icon-pulse{
    0%,
    100%{
        box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 40%, transparent)}
    50%{
        box-shadow:0 0 0 10px color-mix(in srgb, var(--accent) 0%, transparent)}
}
@keyframes icon-bounce{
    0%,
    100%{
        transform:translateY(0)}
    50%{
        transform:translateY(-3px)}
}
@keyframes icon-spin{
    0%{
        transform:rotate(0deg) scale(1)}
    50%{
        transform:rotate(180deg) scale(1.1)}
    100%{
        transform:rotate(360deg) scale(1)}
}
.value-content{
    flex:1}
.value-title{
    font-size:16px;
    font-weight:700;
    color:var(--text);
    margin-bottom:4px}
.value-desc{
    font-size:14px;
    color:var(--text-light);
    line-height:1.5;
    margin:0}
.about-cta{
    display:flex;
    gap:16px;
    flex-wrap:wrap}
@media (max-width:991px){
    .about-section{
        padding:80px 0}
    .about-content{
        grid-template-columns:1fr;
        gap:40px}
    .about-left{
        order:2}
    .about-right{
        order:1;
        padding-left:0}
    .about-title{
        font-size:32px}
    .about-subtitle{
        font-size:18px}
    .about-values{
        grid-template-columns:1fr;
        gap:16px}
}
@media (max-width:768px){
    .about-section{
        padding:60px 0}
    .about-title{
        font-size:28px}
    .about-subtitle{
        font-size:16px}
    .about-desc{
        font-size:15px}
    .value-item{
        padding:16px}
    .value-icon{
        width:48px;
        height:48px}
    .value-title{
        font-size:15px}
    .value-desc{
        font-size:13px}
    .about-cta{
        flex-direction:column}
    .about-cta .btn{
        width:100%;
        justify-content:center}
}
@media (max-width:480px){
    .about-title{
        font-size:24px}
    .video-wrapper{
        border-radius:16px}
    .value-item{
        flex-direction:column;
        text-align:center;
        align-items:center}
    .value-icon{
        width:56px;
        height:56px}
}
.feature-highlight{
    padding:80px 0;
    background:linear-gradient(180deg, #ffffff 0%, #f8fffe 100%);
    position:relative;
    overflow:hidden}
.feature-highlight::before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:1px;
    background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--primary) 20%, transparent), transparent)}
.feature-header{
    text-align:center;
    max-width:700px;
    margin:0 auto 50px}
.feature-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:28px;
    max-width:1100px;
    margin:0 auto}
.feature-box{
    background:white;
    padding:36px 28px;
    border-radius:16px;
    border:2px solid var(--border-light);
    text-align:center;
    transition:all 0.3s ease;
    position:relative;
    overflow:hidden}
.feature-box::before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:3px;
    background:linear-gradient(90deg, var(--primary), var(--primary-light));
    transform:scaleX(0);
    transition:transform 0.3s ease}
.feature-box:hover::before{
    transform:scaleX(1)}
.feature-box:hover{
    transform:translateY(-6px);
    box-shadow:var(--shadow-lg);
    border-color:var(--primary-light)}
.feature-box.featured-box{
    background:linear-gradient(135deg, color-mix(in srgb, var(--primary) 3%, transparent), color-mix(in srgb, var(--primary-light) 3%, transparent));
    border-color:var(--primary)}
.feature-illustration{
    width:100%;
    max-width:200px;
    height:160px;
    margin:0 auto 24px;
    display:flex;
    align-items:center;
    justify-content:center}
.feature-svg{
    width:100%;
    height:100%}
.feature-box:nth-child(1) .line{
    animation:slideIn 2s ease-in-out infinite}
.feature-box:nth-child(1) .line-1{
    animation-delay:0s}
.feature-box:nth-child(1) .line-2{
    animation-delay:0.2s}
.feature-box:nth-child(1) .line-3{
    animation-delay:0.4s}
.feature-box:nth-child(1) .image-box{
    animation:pulse 2s ease-in-out infinite}
.feature-box:nth-child(1) .float-circle,
.feature-box:nth-child(1) .float-square{
    animation:float 3s ease-in-out infinite}
.feature-box:nth-child(1) .float-1{
    animation-delay:0s}
.feature-box:nth-child(1) .float-2{
    animation-delay:0.5s}
.feature-box:nth-child(1) .dot{
    animation:blink 2s ease-in-out infinite}
.feature-box:nth-child(1) .dot-1{
    animation-delay:0s}
.feature-box:nth-child(1) .dot-2{
    animation-delay:0.3s}
.feature-box:nth-child(1) .dot-3{
    animation-delay:0.6s}
.feature-box:nth-child(2) .chart-bar{
    animation:growBar 2s ease-in-out infinite;
    transform-origin:bottom}
.feature-box:nth-child(2) .bar-1{
    animation-delay:0s}
.feature-box:nth-child(2) .bar-2{
    animation-delay:0.2s}
.feature-box:nth-child(2) .bar-3{
    animation-delay:0.4s}
.feature-box:nth-child(2) .bar-4{
    animation-delay:0.6s}
.feature-box:nth-child(2) .trend-arrow,
.feature-box:nth-child(2) .arrow-head{
    animation:drawLine 3s ease-in-out infinite}
.feature-box:nth-child(2) .search-icon,
.feature-box:nth-child(2) .search-handle{
    animation:rotate 4s ease-in-out infinite;
    transform-origin:center}
.feature-box:nth-child(2) .star{
    animation:twinkle 2s ease-in-out infinite}
.feature-box:nth-child(2) .star-1{
    animation-delay:0s}
.feature-box:nth-child(2) .star-2{
    animation-delay:0.5s}
.feature-box:nth-child(2) .star-3{
    animation-delay:1s}
.feature-box:nth-child(3) .doc-line{
    animation:typeWriter 3s ease-in-out infinite}
.feature-box:nth-child(3) .line-1{
    animation-delay:0s}
.feature-box:nth-child(3) .line-2{
    animation-delay:0.3s}
.feature-box:nth-child(3) .line-3{
    animation-delay:0.6s}
.feature-box:nth-child(3) .line-4{
    animation-delay:0.9s}
.feature-box:nth-child(3) .code-symbol{
    animation:bounce 2s ease-in-out infinite}
.feature-box:nth-child(3) .checkmark{
    animation:drawCheck 2s ease-in-out infinite;
    stroke-dasharray:30;
    stroke-dashoffset:30}
.feature-box:nth-child(3) .check-circle{
    animation:pulse 2s ease-in-out infinite}
.feature-box:nth-child(3) .particle{
    animation:float 3s ease-in-out infinite}
.feature-box:nth-child(3) .particle-1{
    animation-delay:0s}
.feature-box:nth-child(3) .particle-2{
    animation-delay:0.5s}
.feature-box:nth-child(3) .particle-3{
    animation-delay:1s}
@keyframes slideIn{
    0%,
    100%{
        opacity:0.3;
        transform:translateX(-10px)}
    50%{
        opacity:1;
        transform:translateX(0)}
}
@keyframes growBar{
    0%,
    100%{
        transform:scaleY(0.7);
        opacity:0.5}
    50%{
        transform:scaleY(1);
        opacity:1}
}
@keyframes drawLine{
    0%{
        opacity:0.3}
    50%{
        opacity:1}
    100%{
        opacity:0.3}
}
@keyframes typeWriter{
    0%{
        stroke-dasharray:0 100}
    50%{
        stroke-dasharray:100 0}
    100%{
        stroke-dasharray:0 100}
}
@keyframes drawCheck{
    0%,
    40%{
        stroke-dashoffset:30}
    60%,
    100%{
        stroke-dashoffset:0}
}
@keyframes bounce{
    0%,
    100%{
        transform:translateY(0)}
    50%{
        transform:translateY(-5px)}
}
@keyframes twinkle{
    0%,
    100%{
        opacity:0.3;
        transform:scale(0.8)}
    50%{
        opacity:1;
        transform:scale(1.2)}
}
@keyframes blink{
    0%,
    100%{
        opacity:1}
    50%{
        opacity:0.3}
}
@keyframes rotate{
    0%,
    100%{
        transform:rotate(0deg)}
    50%{
        transform:rotate(10deg)}
}
.feature-box-title,
.feature-card-title,
.pain-title,
.type-title,
.process-title{
    font-size:19px !important;
    font-weight:700;
    color:var(--text);
    margin-bottom:10px}
.pricing-name{
    font-size:24px !important;
    font-weight:700;
    color:var(--text);
    margin-bottom:10px}
.amount{
    font-size:42px !important;
    font-weight:800 !important}
.currency{
    font-size:20px !important;
    font-weight:600 !important}
.feature-box-desc,
.feature-description,
.pain-description,
.type-description,
.process-description{
    font-size:14px !important;
    color:var(--text-light);
    line-height:1.6;
    margin:0 0 20px 0}
.feature-btn{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:10px 20px;
    background:linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    color:white;
    font-size:14px;
    font-weight:700;
    border-radius:10px;
    transition:all 0.3s ease;
    text-decoration:none;
    margin-top:auto;
    box-shadow:0 4px 12px color-mix(in srgb, var(--primary) 20%, transparent)}
.feature-btn:hover{
    background:linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%);
    transform:translateX(4px) translateY(-2px);
    box-shadow:0 8px 24px color-mix(in srgb, var(--accent) 35%, transparent);
    gap:10px}
.feature-btn .iconify{
    transition:transform 0.3s ease}
.feature-btn:hover .iconify{
    transform:translateX(3px)}
.feature-box{
    display:flex;
    flex-direction:column}
@media (max-width:991px){
    .feature-highlight{
        padding:60px 0}
    .feature-title{
        font-size:28px}
    .feature-subtitle{
        font-size:16px}
    .feature-grid{
        grid-template-columns:1fr;
        gap:20px}
    .feature-box{
        padding:32px 24px}
}
@media (max-width:480px){
    .feature-highlight{
        padding:50px 0}
    .feature-box{
        padding:28px 20px}
    .feature-box-title,
    .feature-card-title,
    .pain-title,
    .type-title,
    .process-title{
        font-size:17px !important}
    .pricing-name{
        font-size:20px !important}
    .pricing-card{
        padding-top:50px !important}
    .amount{
        font-size:32px !important}
    .currency{
        font-size:16px !important}
    .pricing-card:nth-child(2){
        margin-top:32px !important}
    .type-features li{
        font-size:13px !important}
    .feature-illustration{
        max-width:180px;
        height:140px}
}
.how-we-work-section{
    padding:80px 0;
    background:linear-gradient(135deg, #0D9489 0%, #14B8A6 50%, #0F766E 100%);
    position:relative;
    overflow:hidden}
.work-decoration{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    pointer-events:none;
    z-index:0;
    overflow:hidden}
.work-shape{
    position:absolute;
    border-radius:50%;
    background:rgba(255, 255, 255, 0.1);
    border:2px solid rgba(255, 255, 255, 0.2)}
.shape-circle-1{
    width:200px;
    height:200px;
    top:10%;
    left:5%;
    animation:bubbleFloat 25s ease-in-out infinite}
.shape-circle-2{
    width:150px;
    height:150px;
    top:60%;
    right:10%;
    animation:bubbleFloat 20s ease-in-out infinite;
    animation-delay:5s}
.shape-circle-3{
    width:180px;
    height:180px;
    bottom:15%;
    left:15%;
    animation:bubbleFloat 22s ease-in-out infinite;
    animation-delay:10s}
.shape-blob-1{
    width:250px;
    height:250px;
    top:30%;
    right:8%;
    animation:bubbleFloat 18s ease-in-out infinite;
    animation-delay:3s}
.shape-blob-2{
    width:220px;
    height:220px;
    bottom:20%;
    right:25%;
    animation:bubbleFloat 24s ease-in-out infinite;
    animation-delay:8s}
@keyframes bubbleFloat{
    0%,
    100%{
        transform:translateY(0) scale(1);
        opacity:0.3}
    25%{
        transform:translateY(-30px) scale(1.1);
        opacity:0.5}
    50%{
        transform:translateY(-60px) scale(1.05);
        opacity:0.4}
    75%{
        transform:translateY(-30px) scale(0.95);
        opacity:0.6}
}
.how-we-work-section .container{
    position:relative;
    z-index:1}
.how-we-work-section .feature-title{
    color:white}
.how-we-work-section .feature-subtitle{
    color:rgba(255, 255, 255, 0.9)}
.how-we-work-section .section-badge{
    background:rgba(255, 255, 255, 0.2);
    color:white;
    backdrop-filter:blur(10px);
    border:1px solid rgba(255, 255, 255, 0.3)}
.how-we-work-section .badge-icon{
    color: var(--accent) !important}
.work-steps{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:32px;
    margin-top:60px;
    margin-bottom:50px;
    position:relative;
    min-height:600px}
.work-step{
    background:white;
    padding:40px 28px;
    border-radius:20px;
    text-align:center;
    position:relative;
    border:2px solid #f0f0f0;
    box-shadow:0 4px 12px rgba(0, 0, 0, 0.05)}
.work-step{
    align-self:start}
.work-step[data-step="1"]{
    margin-top:0}
.work-step[data-step="2"]{
    margin-top:80px}
.work-step[data-step="3"]{
    margin-top:160px}
.work-step[data-step="4"]{
    margin-top:240px}
.step-number{
    position:absolute;
    top:20px;
    right:20px;
    font-size:48px;
    font-weight:800;
    opacity:0.08;
    line-height:1;
    animation:numberFade 3s ease-in-out infinite}
.work-step[data-step="1"] .step-number{
    color:#0D9489}
.work-step[data-step="2"] .step-number{
    color:#F59E0B}
.work-step[data-step="3"] .step-number{
    color:#0E7490}
.work-step[data-step="4"] .step-number{
    color:#16A34A}
@keyframes numberFade{
    0%,
    100%{
        opacity:0.08}
    50%{
        opacity:0.15}
}
.step-icon{
    width:80px;
    height:80px;
    margin:0 auto 24px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    animation:iconFloat 3s ease-in-out infinite}
.step-icon-1{
    background:linear-gradient(135deg, #0D9489 0%, #14B8A6 100%);
    box-shadow:0 8px 24px rgba(13, 148, 137, 0.25);
    animation-delay:0s}
.step-icon-2{
    background:linear-gradient(135deg, #F59E0B 0%, #FBBF24 100%);
    box-shadow:0 8px 24px rgba(245, 158, 11, 0.25);
    animation-delay:0.3s}
.step-icon-3{
    background:linear-gradient(135deg, #0E7490 0%, #06B6D4 100%);
    box-shadow:0 8px 24px rgba(14, 116, 144, 0.25);
    animation-delay:0.6s}
.step-icon-4{
    background:linear-gradient(135deg, #16A34A 0%, #22C55E 100%);
    box-shadow:0 8px 24px rgba(22, 163, 74, 0.25);
    animation-delay:0.9s}
.step-icon .iconify{
    color:white;
    filter:drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1))}
.step-icon-1 .iconify{
    animation:iconBounce 2s ease-in-out infinite}
.step-icon-2 .iconify{
    animation:iconRotate 3s ease-in-out infinite}
.step-icon-3 .iconify{
    animation:iconPulse 2s ease-in-out infinite}
.step-icon-4 .iconify{
    animation:iconShake 2.5s ease-in-out infinite}
@keyframes iconFloat{
    0%,
    100%{
        transform:translateY(0px)}
    50%{
        transform:translateY(-10px)}
}
@keyframes iconBounce{
    0%,
    100%{
        transform:translateY(0)}
    25%{
        transform:translateY(-8px)}
    50%{
        transform:translateY(0)}
    75%{
        transform:translateY(-4px)}
}
@keyframes iconRotate{
    0%,
    100%{
        transform:rotate(0deg)}
    25%{
        transform:rotate(-10deg)}
    75%{
        transform:rotate(10deg)}
}
@keyframes iconPulse{
    0%,
    100%{
        transform:scale(1)}
    50%{
        transform:scale(1.15)}
}
@keyframes iconShake{
    0%,
    100%{
        transform:translateX(0) rotate(0deg)}
    25%{
        transform:translateX(-5px) rotate(-5deg)}
    50%{
        transform:translateX(5px) rotate(5deg)}
    75%{
        transform:translateX(-3px) rotate(-3deg)}
}
.step-title{
    font-size:18px;
    font-weight:700;
    color:var(--text);
    margin-bottom:12px;
    line-height:1.4}
.step-desc{
    font-size:14px;
    color:var(--text-light);
    line-height:1.7;
    margin:0}
.step-connector{
    position:absolute;
    top:50%;
    right:-32px;
    width:80px;
    height:120px;
    pointer-events:none;
    display:none}
.step-connector::before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:32px;
    height:3px;
    background:rgba(255, 255, 255, 0.4);
    border-radius:2px}
.step-connector::after{
    content:'';
    position:absolute;
    top:3px;
    left:32px;
    width:3px;
    height:120px;
    background:rgba(255, 255, 255, 0.4);
    border-radius:2px}
@media (min-width:992px){
    .work-step[data-step="1"] .step-connector,
    .work-step[data-step="2"] .step-connector,
    .work-step[data-step="3"] .step-connector{
        display:block}
    .work-step[data-step="1"] .step-connector::after{
        height:100px}
    .work-step[data-step="2"] .step-connector::after{
        height:100px}
    .work-step[data-step="3"] .step-connector::after{
        height:100px}
}
.work-step:last-child .step-connector{
    display:none}
@keyframes connectorGlow{
    0%,
    100%{
        opacity:0.4;
        filter:drop-shadow(0 0 2px rgba(255, 255, 255, 0.3))}
    50%{
        opacity:0.7;
        filter:drop-shadow(0 0 6px rgba(255, 255, 255, 0.6))}
}
.step-connector::before,
.step-connector::after{
    animation:connectorGlow 3s ease-in-out infinite}
@keyframes slideInFromBottom{
    from{
        opacity:0;
        transform:translateY(60px) scale(0.9)}
    to{
        opacity:1;
        transform:translateY(0) scale(1)}
}
@keyframes slideInFromLeft{
    from{
        opacity:0;
        transform:translateX(-60px) scale(0.9)}
    to{
        opacity:1;
        transform:translateX(0) scale(1)}
}
@keyframes slideInFromRight{
    from{
        opacity:0;
        transform:translateX(60px) scale(0.9)}
    to{
        opacity:1;
        transform:translateX(0) scale(1)}
}
.work-step{
    opacity:0}
.work-step[data-step="1"]{
    animation:slideInFromLeft 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay:0.2s}
.work-step[data-step="2"]{
    animation:slideInFromBottom 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay:0.4s}
.work-step[data-step="3"]{
    animation:slideInFromBottom 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay:0.6s}
.work-step[data-step="4"]{
    animation:slideInFromRight 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay:0.8s}
@media (max-width:991px){
    .how-we-work-section{
        padding:80px 0}
    .work-steps{
        grid-template-columns:repeat(2, 1fr);
        gap:24px;
        margin-top:50px;
        min-height:auto}
    .step-connector{
        display:none}
    .work-step{
        padding:32px 24px}
    .work-step[data-step="1"],
    .work-step[data-step="2"],
    .work-step[data-step="3"],
    .work-step[data-step="4"]{
        margin-top:0}
    .step-icon{
        width:70px;
        height:70px}
    .step-icon .iconify{
        width:36px !important;
        height:36px !important}
}
@media (max-width:768px){
    .how-we-work-section{
        padding:60px 0}
    .work-steps{
        grid-template-columns:1fr;
        gap:20px;
        margin-top:40px;
        min-height:auto}
    .work-step{
        padding:28px 20px}
    .step-number{
        font-size:36px;
        top:16px;
        right:16px}
    .step-icon{
        width:64px;
        height:64px}
    .step-icon .iconify{
        width:32px !important;
        height:32px !important}
    .step-title{
        font-size:17px}
    .step-desc{
        font-size:13px}
}
@media (max-width:480px){
    .work-step{
        padding:24px 18px}
    .step-title{
        font-size:16px}
    .step-desc{
        font-size:12px}
}
.portfolio-section{
    padding:80px 0;
    background:linear-gradient(180deg, #ffffff 0%, #f8fffe 100%);
    position:relative;
    overflow:hidden}
.portfolio-decoration{
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    pointer-events:none;
    z-index:0}
.deco-shape{
    position:absolute;
    border-radius:50%;
    opacity:0.08}
.shape-1{
    width:250px;
    height:250px;
    background:linear-gradient(135deg, var(--primary), var(--primary-light));
    top:5%;
    right:5%;
    animation:float-slow 20s ease-in-out infinite}
.shape-2{
    width:180px;
    height:180px;
    background:linear-gradient(135deg, var(--accent), var(--accent-light));
    bottom:8%;
    left:3%;
    animation:float-slow 15s ease-in-out infinite reverse}
.shape-3{
    width:140px;
    height:140px;
    background:linear-gradient(135deg, var(--primary-light), var(--primary));
    top:35%;
    left:8%;
    animation:float-medium 12s ease-in-out infinite;
    border-radius:30% 70% 70% 30% / 30% 30% 70% 70%}
.shape-4{
    width:160px;
    height:160px;
    background:linear-gradient(135deg, var(--accent-light), var(--accent));
    top:15%;
    right:12%;
    animation:float-medium 18s ease-in-out infinite reverse;
    border-radius:60% 40% 30% 70% / 60% 30% 70% 40%}
.shape-5{
    width:110px;
    height:110px;
    background:linear-gradient(135deg, var(--primary), var(--accent));
    bottom:25%;
    right:18%;
    animation:rotate-slow 25s linear infinite;
    border-radius:40% 60% 60% 40% / 40% 60% 40% 60%}
@keyframes float-slow{
    0%,
    100%{
        transform:translate(0, 0) scale(1)}
    33%{
        transform:translate(30px, -30px) scale(1.1)}
    66%{
        transform:translate(-20px, 20px) scale(0.9)}
}
@keyframes float-medium{
    0%,
    100%{
        transform:translate(0, 0) rotate(0deg)}
    50%{
        transform:translate(20px, -20px) rotate(180deg)}
}
@keyframes rotate-slow{
    0%{
        transform:rotate(0deg)}
    100%{
        transform:rotate(360deg)}
}
.portfolio-section .container{
    position:relative;
    z-index:1}
.portfolio-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:32px;
    margin-bottom:48px}
.portfolio-card{
    background:white;
    border-radius:20px;
    overflow:hidden;
    border:2px solid var(--border-light);
    transition:all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position:relative}
.portfolio-card:hover{
    transform:translateY(-12px);
    box-shadow:0 24px 48px color-mix(in srgb, var(--primary) 20%, transparent);
    border-color:var(--primary-light)}
.portfolio-image{
    position:relative;
    width:100%;
    aspect-ratio:16/9;
    overflow:hidden;
    background:linear-gradient(135deg, color-mix(in srgb, var(--primary) 5%, transparent), color-mix(in srgb, var(--primary-light) 5%, transparent))}
.portfolio-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    transition:transform 0.6s cubic-bezier(0.4, 0, 0.2, 1)}
.portfolio-card:hover .portfolio-image img{
    transform:scale(1.15)}
.portfolio-overlay{
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:linear-gradient(135deg, rgba(13, 148, 137, 0.65), rgba(20, 184, 166, 0.6));
    backdrop-filter:blur(12px) saturate(180%);
    -webkit-backdrop-filter:blur(12px) saturate(180%);
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    transition:opacity 0.4s ease;
    padding:24px}
.portfolio-card:hover .portfolio-overlay{
    opacity:1}
.portfolio-overlay-actions{
    display:flex;
    align-items:center;
    gap:12px;
    transform:translateY(20px);
    transition:transform 0.4s ease}
.portfolio-card:hover .portfolio-overlay-actions{
    transform:translateY(0)}
.portfolio-action-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:4px;
    padding:5px;
    background:white;
    color:var(--primary);
    font-size:11px;
    font-weight:700;
    border-radius:6px;
    transition:all 0.3s ease;
    text-decoration:none;
    min-width:32px;
    min-height:32px}
.portfolio-action-btn:hover{
    transform:translateY(-4px);
    box-shadow:0 8px 20px rgba(0, 0, 0, 0.3);
    background:var(--accent);
    color:white}
.portfolio-detail-btn{
    padding:5px 12px}
.portfolio-action-btn .btn-text{
    white-space:nowrap}
.portfolio-info{
    padding:24px}
.portfolio-title{
    font-size:18px;
    font-weight:700;
    color:var(--text);
    margin-bottom:8px;
    line-height:1.4}
.portfolio-category{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:14px;
    color:var(--primary);
    font-weight:600}
.portfolio-category .iconify{
    color:var(--accent)}
.portfolio-cta{
    text-align:center;
    margin-top:20px}
.portfolio-cta .btn{
    display:inline-flex;
    align-items:center;
    gap:8px}
.btn-lg{
    padding:16px 32px;
    font-size:16px;
    border-radius:14px}
.btn-lg .iconify{
    width:24px;
    height:24px}
@media (max-width:991px){
    .portfolio-section{
        padding:80px 0}
    .portfolio-grid{
        grid-template-columns:repeat(2, 1fr);
        gap:24px}
}
@media (max-width:768px){
    .portfolio-section{
        padding:60px 0}
    .portfolio-grid{
        grid-template-columns:1fr;
        gap:24px}
    .portfolio-overlay-actions{
        flex-direction:row;
        gap:5px}
    .portfolio-action-btn{
        font-size:10px;
        min-width:28px;
        min-height:28px;
        padding:4px}
    .portfolio-detail-btn{
        padding:4px 8px}
    .portfolio-info{
        padding:20px}
    .portfolio-title{
        font-size:16px}
    .btn-lg{
        width:100%;
        justify-content:center}
    .portfolio-cta .btn-lg{
        width:auto !important}
}
.testimonials-section{
    padding:80px 0;
    background:white;
    position:relative;
    overflow:hidden}
.testimonials-slider{
    position:relative;
    overflow:hidden;
    margin-bottom:40px}
.testimonials-track{
    display:flex;
    gap:24px;
    transition:transform 0.5s ease}
.testimonial-card{
    width:calc(33.333% - 16px);
    min-width:calc(33.333% - 16px);
    max-width:calc(33.333% - 16px);
    min-height:280px;
    background:linear-gradient(135deg, #ffffff 0%, #f8fffe 100%);
    padding:20px 18px;
    border-radius:14px;
    border:1px solid var(--border-light);
    position:relative;
    flex-shrink:0;
    overflow:hidden;
    display:flex;
    flex-direction:column}
.testimonial-card::before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:3px;
    background:linear-gradient(90deg, var(--primary), var(--accent))}
.card-header{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:12px}
.author-avatar{
    width:48px;
    height:48px;
    border-radius:50%;
    background:linear-gradient(135deg, var(--primary), var(--primary-light));
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    box-shadow:0 4px 12px color-mix(in srgb, var(--primary) 20%, transparent)}
.author-avatar .iconify{
    width:48px !important;
    height:48px !important}
.author-info-top{
    flex:1}
.author-name{
    font-size:14px;
    font-weight:700;
    color:var(--text);
    margin-bottom:2px}
.author-role{
    font-size:12px;
    color:var(--text-light);
    margin-bottom:4px}
.card-footer{
    margin-top:10px;
    padding-top:10px;
    border-top:1px solid var(--border-light)}
.verified-badge{
    display:inline-flex;
    align-items:center;
    gap:3px;
    font-size:10px;
    color:var(--primary);
    font-weight:600;
    padding:3px 8px;
    background:color-mix(in srgb, var(--primary) 10%, transparent);
    border-radius:50px}
.verified-badge .iconify{
    width:12px !important;
    height:12px !important}
.testimonial-quote{
    position:absolute;
    top:20px;
    right:20px;
    color:var(--primary);
    opacity:0.1}
.testimonial-rating{
    display:flex;
    gap:2px}
.testimonial-rating .iconify{
    width:12px !important;
    height:12px !important}
.testimonial-rating .star{
    color:var(--accent);
    animation:star-twinkle 2s ease-in-out infinite}
.testimonial-rating .star:nth-child(1){
    animation-delay:0s}
.testimonial-rating .star:nth-child(2){
    animation-delay:0.2s}
.testimonial-rating .star:nth-child(3){
    animation-delay:0.4s}
.testimonial-rating .star:nth-child(4){
    animation-delay:0.6s}
.testimonial-rating .star:nth-child(5){
    animation-delay:0.8s}
@keyframes star-twinkle{
    0%,
    100%{
        transform:scale(1);
        opacity:1}
    50%{
        transform:scale(1.2);
        opacity:0.8}
}
.testimonial-text{
    font-size:13px;
    color:var(--text);
    line-height:1.6;
    margin-bottom:12px;
    font-style:italic;
    flex:1;
    display:flex;
    align-items:center}
.testimonial-author{
    display:flex;
    align-items:center;
    gap:16px;
    padding-top:24px;
    border-top:2px solid var(--border-light)}
.author-avatar{
    width:56px;
    height:56px;
    border-radius:50%;
    background:linear-gradient(135deg, var(--primary), var(--primary-light));
    display:flex;
    align-items:center;
    justify-content:center;
    color:white;
    flex-shrink:0;
    transition:all 0.3s ease}
.author-info{
    flex:1}
.author-name{
    font-size:17px;
    font-weight:700;
    color:var(--text);
    margin-bottom:4px}
.author-role{
    font-size:14px;
    color:var(--text-light);
    margin-bottom:6px}
.author-verified{
    display:inline-flex;
    align-items:center;
    gap:4px;
    font-size:12px;
    color:var(--primary);
    font-weight:600}
.author-verified .iconify{
    color:var(--accent)}
.testimonials-nav{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:24px}
.nav-btn{
    display:none}
.testimonials-dots{
    display:flex;
    gap:8px;
    align-items:center;
    justify-content:center;
    margin-top:30px}
.testimonials-dots .dot{
    width:10px;
    height:10px;
    border-radius:50%;
    background:#D1D5DB;
    cursor:pointer;
    transition:all 0.3s ease}
.testimonials-dots .dot.active{
    background:#0D9489 !important;
    width:28px !important;
    border-radius:5px !important}
@media (max-width:991px){
    .testimonials-section{
        padding:80px 0}
    .testimonial-card{
        width:calc(50% - 12px);
        min-width:calc(50% - 12px);
        max-width:calc(50% - 12px);
        min-height:280px}
}
@media (max-width:768px){
    .testimonials-section{
        padding:60px 0}
    .testimonial-card{
        width:100%;
        min-width:100%;
        max-width:100%;
        min-height:260px;
        padding:20px 18px}
    .testimonials-track{
        gap:20px}
    .testimonial-text{
        font-size:13px}
}
@media (max-width:480px){
    .testimonial-card{
        min-height:240px;
        padding:18px 16px}
    .testimonial-text{
        font-size:12px}
    .author-name{
        font-size:13px}
    .author-role{
        font-size:11px}
    .author-avatar{
        width:44px;
        height:44px}
    .author-avatar .iconify{
        width:44px !important;
        height:44px !important}
}
.code-editor-mockup{
    width:100%;
    max-width:500px;
    background:#1e1e1e;
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 20px 60px rgba(0, 0, 0, 0.3);
    border:1px solid #333}
.editor-header{
    background:#2d2d2d;
    padding:12px 16px;
    display:flex;
    align-items:center;
    gap:12px;
    border-bottom:1px solid #1e1e1e}
.editor-dots{
    display:flex;
    gap:6px}
.dot{
    width:12px;
    height:12px;
    border-radius:50%}
.dot-red{
    background:#ff5f56}
.dot-yellow{
    background:#ffbd2e}
.dot-green{
    background:#27c93f}
.editor-title{
    color:#cccccc;
    font-size:13px;
    font-weight:600;
    flex:1}
.editor-lang{
    color:#858585;
    font-size:11px;
    background:#3c3c3c;
    padding:4px 10px;
    border-radius:4px}
.editor-content{
    display:flex;
    padding:20px 0;
    min-height:280px;
    background:#1e1e1e}
.line-numbers{
    display:flex;
    flex-direction:column;
    padding:0 16px;
    color:#858585;
    font-family:'Courier New', monospace;
    font-size:14px;
    line-height:1.8;
    user-select:none;
    text-align:right;
    min-width:40px}
.code-lines{
    flex:1;
    color:#d4d4d4;
    font-family:'Courier New', monospace;
    font-size:14px;
    line-height:1.8;
    padding-right:20px;
    position:relative}
.code-lines pre{
    margin:0;
    white-space:pre-wrap;
    word-wrap:break-word}
.keyword{
    color:#569cd6}
.string{
    color:#ce9178}
.property{
    color:#9cdcfe}
.function{
    color:#dcdcaa}
.comment{
    color:#6a9955;
    font-style:italic}
.cursor{
    display:inline-block;
    width:2px;
    height:18px;
    background:#ffffff;
    animation:blink 1s infinite;
    margin-left:2px;
    vertical-align:text-bottom}
@keyframes blink{
    0%,
    49%{
        opacity:1}
    50%,
    100%{
        opacity:0}
}
@media (max-width:768px){
    .code-editor-mockup{
        max-width:100%}
    .editor-content{
        min-height:240px}
    .code-lines{
        font-size:12px}
    .line-numbers{
        font-size:12px}
}
.blog-section{
    padding:80px 0;
    background:white;
    position:relative}
.blog-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:32px;
    margin-top:60px;
    margin-bottom:50px}
.blog-card{
    background:white;
    border-radius:16px;
    overflow:hidden;
    border:1px solid var(--border-light);
    transition:all 0.4s ease;
    box-shadow:0 4px 12px rgba(0, 0, 0, 0.05)}
.blog-card:hover{
    transform:translateY(-8px);
    box-shadow:0 12px 32px rgba(13, 148, 137, 0.15);
    border-color:var(--primary)}
.blog-thumbnail-link{
    display:block;
    text-decoration:none}
.blog-thumbnail{
    position:relative;
    width:100%;
    height:220px;
    overflow:hidden;
    background:var(--primary-soft)}
.blog-thumbnail img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform 0.4s ease}
.blog-thumbnail-link:hover .blog-thumbnail img{
    transform:scale(1.1)}
.blog-category{
    position:absolute;
    top:16px;
    left:16px;
    background:var(--primary);
    color:white;
    padding:6px 14px;
    border-radius:20px;
    font-size:12px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:0.5px;
    box-shadow:0 4px 12px rgba(13, 148, 137, 0.3)}
.blog-content{
    padding:24px}
.blog-title{
    font-size:18px;
    font-weight:700;
    margin-bottom:12px;
    line-height:1.4;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden}
.blog-title-link{
    color:var(--text);
    text-decoration:none;
    transition:color 0.3s ease}
.blog-title-link:hover{
    color:var(--primary)}
.blog-excerpt{
    font-size:14px;
    color:var(--text-light);
    line-height:1.7;
    margin-bottom:16px;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden}
.blog-link{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:14px;
    font-weight:600;
    color:var(--primary);
    text-decoration:none;
    transition:all 0.3s ease}
.blog-link:hover{
    color:var(--accent);
    gap:10px}
.blog-link .iconify{
    transition:transform 0.3s ease}
.blog-link:hover .iconify{
    transform:translateX(4px)}
.blog-cta{
    text-align:center}
@media (max-width:991px){
    .blog-section{
        padding:80px 0}
    .blog-grid{
        grid-template-columns:repeat(2, 1fr);
        gap:24px;
        margin-top:50px}
    .blog-thumbnail{
        height:200px}
}
@media (max-width:768px){
    .blog-section{
        padding:60px 0}
    .blog-grid{
        grid-template-columns:1fr;
        gap:20px;
        margin-top:40px}
    .blog-thumbnail{
        height:220px}
    .blog-content{
        padding:20px}
    .blog-title{
        font-size:17px}
    .blog-excerpt{
        font-size:13px}
}
@media (max-width:480px){
    .blog-content{
        padding:18px}
    .blog-title{
        font-size:16px}
    .blog-excerpt{
        font-size:12px}
    .blog-thumbnail{
        height:200px}
}
.faq-section{
    padding:80px 0;
    background:linear-gradient(135deg, #f8fffe 0%, #ffffff 100%);
    position:relative}
.faq-container{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:20px;
    margin:60px auto 50px;
    max-width:1200px}
.faq-item{
    background:white;
    border-radius:16px;
    border:2px solid var(--border-light);
    overflow:hidden;
    transition:all 0.3s ease;
    grid-column:span 1;
    max-width:100%}
.faq-item:hover{
    border-color:var(--primary);
    box-shadow:0 4px 16px rgba(13, 148, 137, 0.1)}
.faq-item.active{
    border-color:var(--primary);
    box-shadow:0 8px 24px rgba(13, 148, 137, 0.15);
    grid-column:span 1}
.faq-question{
    width:100%;
    display:flex;
    align-items:center;
    gap:14px;
    padding:18px 22px;
    background:transparent;
    border:none;
    cursor:pointer;
    text-align:left;
    transition:all 0.3s ease}
.faq-item.active .faq-question{
    background:var(--primary-soft)}
.faq-icon{
    width:44px;
    height:44px;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    transition:all 0.3s ease}
.faq-icon .iconify{
    width:24px !important;
    height:24px !important;
    animation:iconBounce 2s ease-in-out infinite}
.faq-item:nth-child(1) .faq-icon{
    background:linear-gradient(135deg, #3B82F6 0%, #60A5FA 100%)}
.faq-item:nth-child(1) .faq-icon .iconify{
    color:white}
.faq-item:nth-child(2) .faq-icon{
    background:linear-gradient(135deg, #F59E0B 0%, #FBBF24 100%)}
.faq-item:nth-child(2) .faq-icon .iconify{
    color:white;
    animation:iconRotate 3s ease-in-out infinite}
.faq-item:nth-child(3) .faq-icon{
    background:linear-gradient(135deg, #8B5CF6 0%, #A78BFA 100%)}
.faq-item:nth-child(3) .faq-icon .iconify{
    color:white;
    animation:iconPulse 2s ease-in-out infinite}
.faq-item:nth-child(4) .faq-icon{
    background:linear-gradient(135deg, #06B6D4 0%, #22D3EE 100%)}
.faq-item:nth-child(4) .faq-icon .iconify{
    color:white;
    animation:iconShake 2.5s ease-in-out infinite}
.faq-item:nth-child(5) .faq-icon{
    background:linear-gradient(135deg, #EC4899 0%, #F472B6 100%)}
.faq-item:nth-child(5) .faq-icon .iconify{
    color:white;
    animation:iconBounce 2.2s ease-in-out infinite}
.faq-item:nth-child(6) .faq-icon{
    background:linear-gradient(135deg, #16A34A 0%, #22C55E 100%)}
.faq-item:nth-child(6) .faq-icon .iconify{
    color:white;
    animation:iconRotate 2.8s ease-in-out infinite}
.faq-item.active .faq-icon{
    transform:scale(1.1) rotate(5deg);
    box-shadow:0 8px 20px rgba(0, 0, 0, 0.15)}
.faq-text{
    flex:1;
    font-size:16px;
    font-weight:600;
    color:var(--text);
    line-height:1.5}
.faq-toggle{
    width:32px;
    height:32px;
    border-radius:50%;
    background:var(--primary-soft);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    transition:all 0.3s ease}
.faq-toggle .iconify{
    color:var(--primary);
    transition:transform 0.3s ease}
.faq-item.active .faq-toggle{
    background:var(--primary)}
.faq-item.active .faq-toggle .iconify{
    color:white}
.faq-answer{
    max-height:0;
    overflow:hidden;
    opacity:0;
    transition:max-height 0.4s ease, opacity 0.3s ease}
.faq-item.active .faq-answer{
    opacity:1}
.faq-answer p{
    padding:0 22px 18px 80px;
    margin:0;
    font-size:14px;
    color:var(--text-light);
    line-height:1.7}
.faq-cta{
    text-align:center;
    margin-top:60px}
.faq-cta-text{
    font-size:18px;
    font-weight:600;
    color:var(--text);
    margin-bottom:20px}
@media (max-width:991px){
    .faq-section{
        padding:80px 0}
    .faq-container{
        grid-template-columns:1fr;
        gap:16px;
        margin-top:50px}
    .faq-question{
        padding:16px 20px}
    .faq-icon{
        width:40px;
        height:40px}
    .faq-text{
        font-size:15px}
    .faq-answer p{
        padding:0 20px 16px 74px;
        font-size:13px}
}
@media (max-width:768px){
    .faq-section{
        padding:60px 0}
    .faq-container{
        margin-top:40px}
    .faq-question{
        padding:16px 18px;
        gap:12px}
    .faq-icon{
        width:38px;
        height:38px}
    .faq-icon .iconify{
        width:20px !important;
        height:20px !important}
    .faq-text{
        font-size:14px}
    .faq-toggle{
        width:28px;
        height:28px}
    .faq-toggle .iconify{
        width:18px !important;
        height:18px !important}
    .faq-answer p{
        padding:0 18px 16px 68px;
        font-size:13px}
    .faq-cta-text{
        font-size:16px}
}
@media (max-width:480px){
    .faq-question{
        padding:14px 16px;
        gap:10px}
    .faq-icon{
        width:36px;
        height:36px}
    .faq-icon .iconify{
        width:18px !important;
        height:18px !important}
    .faq-text{
        font-size:13px}
    .faq-answer p{
        padding:0 16px 14px 62px;
        font-size:12px}
}
.cta-section{
    padding:80px 0;
    background:linear-gradient(135deg, #ffffff 0%, #f8fffe 100%);
    position:relative;
    overflow:hidden}
.cta-content{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:center;
    position:relative;
    z-index:1}
.cta-text{
    color:var(--text)}
.cta-title{
    font-size:42px;
    font-weight:800;
    color:var(--text);
    margin-bottom:20px;
    line-height:1.2}
.cta-subtitle{
    font-size:18px;
    color:var(--text-light);
    line-height:1.7;
    margin-bottom:32px}
.cta-features{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:20px;
    margin-bottom:40px}
.cta-feature{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:12px;
    padding:24px 16px;
    background:white;
    border-radius:16px;
    border:2px solid var(--border-light);
    font-size:14px;
    font-weight:600;
    color:var(--text);
    transition:all 0.3s ease}
.cta-feature:hover{
    transform:translateY(-5px);
    border-color:var(--primary);
    box-shadow:0 8px 24px rgba(13, 148, 137, 0.15)}
.cta-feature .feature-icon{
    width:64px;
    height:64px;
    border-radius:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    position:relative}
.cta-feature .feature-icon .iconify{
    width:40px !important;
    height:40px !important}
.cta-feature:nth-child(1) .feature-icon{
    background:linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
    box-shadow:0 8px 24px rgba(252, 211, 77, 0.3);
    animation:iconPulse 2s ease-in-out infinite}
.cta-feature:nth-child(2) .feature-icon{
    background:linear-gradient(135deg, #CCFBF1 0%, #99F6E4 100%);
    box-shadow:0 8px 24px rgba(20, 184, 166, 0.3);
    animation:iconBounce 2s ease-in-out infinite}
.cta-feature:nth-child(3) .feature-icon{
    background:linear-gradient(135deg, #FED7AA 0%, #FDBA74 100%);
    box-shadow:0 8px 24px rgba(251, 146, 60, 0.3);
    animation:iconRotate 3s ease-in-out infinite}
.cta-buttons{
    display:flex;
    gap:16px;
    flex-wrap:wrap}
.btn-cta-primary{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:18px 40px;
    background:linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    color:white;
    font-size:17px;
    font-weight:700;
    border-radius:12px;
    text-decoration:none;
    transition:all 0.3s ease;
    box-shadow:0 8px 24px rgba(13, 148, 137, 0.3)}
.btn-cta-primary:hover{
    transform:translateY(-3px);
    box-shadow:0 12px 32px rgba(13, 148, 137, 0.4);
    background:linear-gradient(135deg, var(--primary-light) 0%, var(--accent) 100%)}
.cta-visual{
    position:relative}
.cta-visual::before{
    content:'';
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    width:90%;
    height:90%;
    background:linear-gradient(135deg, rgba(13, 148, 137, 0.08) 0%, rgba(20, 184, 166, 0.12) 100%);
    border-radius:40% 60% 70% 30% / 40% 50% 60% 50%;
    z-index:0;
    animation:morphBackground 20s ease-in-out infinite}
@keyframes morphBackground{
    0%,
    100%{
        border-radius:40% 60% 70% 30% / 40% 50% 60% 50%;
        transform:translate(-50%, -50%) rotate(0deg)}
    25%{
        border-radius:60% 40% 50% 50% / 30% 60% 40% 70%;
        transform:translate(-50%, -50%) rotate(90deg)}
    50%{
        border-radius:50% 50% 30% 70% / 50% 50% 70% 30%;
        transform:translate(-50%, -50%) rotate(180deg)}
    75%{
        border-radius:70% 30% 60% 40% / 70% 40% 60% 30%;
        transform:translate(-50%, -50%) rotate(270deg)}
}
.cta-illustration{
    width:100%;
    max-width:700px;
    margin:0 auto;
    position:relative;
    z-index:1;
    animation:floatIllustration 6s ease-in-out infinite}
.cta-illustration svg{
    width:100%;
    height:auto;
    filter:drop-shadow(0 10px 30px rgba(0, 0, 0, 0.2))}
.float-element{
    animation:floatElement 4s ease-in-out infinite}
@keyframes floatIllustration{
    0%,
    100%{
        transform:translateY(0)}
    50%{
        transform:translateY(-20px)}
}
@keyframes floatElement{
    0%,
    100%{
        transform:translate(0, 0)}
    50%{
        transform:translate(10px, -10px)}
}
.cta-decoration{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    pointer-events:none;
    z-index:0}
.cta-shape{
    position:absolute;
    border-radius:50%;
    opacity:0.15}
.cta-shape.shape-1{
    width:300px;
    height:300px;
    background:radial-gradient(circle, rgba(13, 148, 137, 0.08) 0%, transparent 70%);
    top:-100px;
    right:-50px;
    animation:floatShape 20s ease-in-out infinite}
.cta-shape.shape-2{
    width:200px;
    height:200px;
    background:radial-gradient(circle, rgba(245, 158, 11, 0.08) 0%, transparent 70%);
    bottom:-50px;
    left:10%;
    animation:floatShape 15s ease-in-out infinite reverse}
.cta-shape.shape-3{
    width:150px;
    height:150px;
    background:radial-gradient(circle, rgba(139, 92, 246, 0.08) 0%, transparent 70%);
    top:50%;
    left:-50px;
    animation:floatShape 18s ease-in-out infinite}
@media (max-width:991px){
    .cta-section{
        padding:80px 0}
    .cta-content{
        grid-template-columns:1fr;
        gap:40px}
    .cta-title{
        font-size:36px}
    .cta-subtitle{
        font-size:17px}
    .cta-content{
        grid-template-columns:1fr}
    .cta-visual{
        order:-1}
    .cta-illustration{
        max-width:550px}
    .cta-features{
        grid-template-columns:1fr}
}
@media (max-width:768px){
    .cta-section{
        padding:60px 0}
    .cta-title{
        font-size:32px}
    .cta-subtitle{
        font-size:16px;
        margin-bottom:24px}
    .cta-features{
        grid-template-columns:1fr;
        gap:16px;
        margin-bottom:32px}
    .cta-feature{
        flex-direction:row;
        text-align:left;
        padding:16px 20px;
        font-size:14px}
    .cta-feature .feature-icon{
        width:56px;
        height:56px}
    .cta-feature .feature-icon .iconify{
        width:36px !important;
        height:36px !important}
    .cta-buttons{
        flex-direction:column}
    .btn-cta-primary,
    .btn-cta-secondary{
        width:100%;
        justify-content:center;
        padding:14px 28px;
        font-size:15px}
    .cta-illustration{
        max-width:300px}
}
@media (max-width:480px){
    .cta-title{
        font-size:28px}
    .cta-subtitle{
        font-size:15px}
    .cta-feature{
        font-size:13px;
        padding:14px 18px}
    .cta-feature .feature-icon{
        width:52px;
        height:52px}
    .cta-feature .feature-icon .iconify{
        width:32px !important;
        height:32px !important}
    .btn-cta-primary{
        padding:14px 28px;
        font-size:15px}
}
.article-content{
    line-height:1.8;
    font-size:1.0625rem;
    color:var(--text);
    max-width:100%;
    word-wrap:break-word;
    overflow-wrap:break-word;
    hyphens:auto}
.article-content h1,
.article-content h2,
.article-content h3,
.article-content h4,
.article-content h5,
.article-content h6{
    font-weight:700;
    color:var(--text);
    line-height:1.3;
    margin-top:2.5rem;
    margin-bottom:1rem;
    scroll-margin-top:80px;
    font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif}
.article-content h1{
    font-size:2.25rem;
    margin-top:3rem;
    margin-bottom:1.5rem;
    font-weight:800;
    letter-spacing:-0.02em}
.article-content h2{
    font-size:1.875rem;
    border-bottom:2px solid var(--border);
    padding-bottom:0.5rem;
    margin-top:3rem;
    margin-bottom:1.25rem;
    font-weight:700;
    color:var(--text);
    position:relative}
.article-content h2::before{
    content:'';
    position:absolute;
    bottom:-2px;
    left:0;
    width:60px;
    height:2px;
    background:linear-gradient(90deg, var(--primary), var(--primary-light))}
.article-content h3{
    font-size:1.5rem;
    color:var(--primary-dark);
    margin-top:2rem;
    margin-bottom:1rem;
    font-weight:700}
.article-content h4{
    font-size:1.25rem;
    color:var(--text);
    margin-top:1.75rem;
    margin-bottom:0.875rem;
    font-weight:600}
.article-content h5{
    font-size:1.125rem;
    margin-top:1.5rem;
    margin-bottom:0.75rem;
    font-weight:600;
    color:var(--text)}
.article-content h6{
    font-size:1rem;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:0.05em;
    color:var(--text-light);
    margin-top:1.5rem;
    margin-bottom:0.75rem}
.article-content p{
    margin-bottom:1.5rem;
    line-height:1.8;
    color:var(--text);
    text-align:justify;
    text-justify:inter-word}
.article-content p:first-of-type{
    font-size:1.125rem;
    color:var(--text-light);
    line-height:1.7}
.article-content p:last-child{
    margin-bottom:0}
.article-content a{
    color:var(--primary);
    text-decoration:underline;
    text-decoration-color:var(--primary-soft);
    text-decoration-thickness:2px;
    text-underline-offset:3px;
    transition:all 0.3s ease}
.article-content a:hover{
    color:var(--primary-dark);
    text-decoration-color:var(--primary)}
.article-content ul,
.article-content ol{
    margin-bottom:1.5rem;
    margin-top:1rem;
    padding-left:2rem;
    line-height:1.8}
.article-content ul{
    list-style-type:disc}
.article-content ol{
    list-style-type:decimal}
.article-content li{
    margin-bottom:0.75rem;
    padding-left:0.5rem;
    color:var(--text)}
.article-content li::marker{
    color:var(--primary);
    font-weight:600}
.article-content ul ul,
.article-content ol ol,
.article-content ul ol,
.article-content ol ul{
    margin-top:0.5rem;
    margin-bottom:0.5rem;
    padding-left:1.5rem}
.article-content ul ul{
    list-style-type:circle}
.article-content ul ul ul{
    list-style-type:square}
.article-content ol ol{
    list-style-type:lower-alpha}
.article-content ol ol ol{
    list-style-type:lower-roman}
.article-content li > p{
    margin-bottom:0.5rem}
.article-content li > p:last-child{
    margin-bottom:0}
.article-content table{
    width:100%;
    margin:2rem 0;
    border-collapse:collapse;
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    overflow:hidden;
    box-shadow:var(--shadow-sm);
    font-size:0.9375rem;
    background:white}
.article-content thead{
    background:linear-gradient(135deg, var(--primary), var(--primary-light));
    color:white}
.article-content thead th{
    padding:1rem;
    text-align:left;
    font-weight:700;
    border-bottom:2px solid var(--primary-dark);
    white-space:nowrap}
.article-content tbody tr{
    border-bottom:1px solid var(--border-light);
    transition:background-color 0.2s ease}
.article-content tbody tr:hover{
    background-color:var(--primary-soft)}
.article-content tbody tr:last-child{
    border-bottom:none}
.article-content td{
    padding:0.875rem 1rem;
    vertical-align:top;
    border-right:1px solid var(--border-light)}
.article-content td:last-child,
.article-content th:last-child{
    border-right:none}
.article-content tbody tr:nth-child(even){
    background-color:var(--bg-light)}
.article-content caption{
    caption-side:bottom;
    padding:0.75rem;
    color:var(--text-light);
    font-size:0.875rem;
    font-style:italic;
    text-align:center}
.article-content-table-wrapper{
    overflow-x:auto;
    margin:2rem 0;
    -webkit-overflow-scrolling:touch}
@media (max-width:768px){
    .article-content table{
        display:block;
        overflow-x:auto;
        white-space:nowrap;
        -webkit-overflow-scrolling:touch}
    .article-content thead th,
    .article-content td{
        padding:0.75rem;
        font-size:0.875rem}
    .article-content table{
        box-shadow:inset -10px 0 8px -8px rgba(0, 0, 0, 0.15),inset 10px 0 8px -8px rgba(0, 0, 0, 0.15)}
}
.article-content blockquote{
    border-left:4px solid var(--primary);
    background:linear-gradient(135deg, var(--primary-soft), color-mix(in srgb, var(--primary-soft) 80%, white));
    padding:1.5rem 1.5rem 1.5rem 2rem;
    margin:2rem 0;
    font-style:italic;
    color:var(--text);
    border-radius:0 var(--radius-sm) var(--radius-sm) 0;
    position:relative;
    box-shadow:var(--shadow-sm)}
.article-content blockquote::before{
    content:'"';
    font-size:4rem;
    color:var(--primary);
    opacity:0.2;
    position:absolute;
    top:-10px;
    left:10px;
    font-family:Georgia, serif;
    line-height:1;
    font-weight:700}
.article-content blockquote p{
    margin-bottom:0.5rem;
    position:relative;
    z-index:1}
.article-content blockquote p:last-child{
    margin-bottom:0}
.article-content blockquote cite{
    display:block;
    margin-top:1rem;
    font-size:0.875rem;
    color:var(--text-light);
    font-style:normal;
    font-weight:600}
.article-content blockquote cite::before{
    content:'— ';
    color:var(--primary)}
.article-content blockquote.highlight{
    border-left-color:var(--accent);
    background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, white), color-mix(in srgb, var(--accent) 5%, white))}
.article-content blockquote.highlight::before{
    color:var(--accent)}
.article-content code{
    background-color:var(--bg-dark);
    color:var(--danger);
    padding:0.25rem 0.5rem;
    border-radius:0.25rem;
    font-size:0.875em;
    font-family:'Fira Code', 'Courier New', monospace;
    font-weight:500;
    border:1px solid var(--border)}
.article-content pre{
    background-color:#1e293b;
    color:#e2e8f0;
    padding:1.5rem;
    border-radius:var(--radius-sm);
    overflow-x:auto;
    margin:2rem 0;
    box-shadow:var(--shadow-md);
    border:1px solid #334155;
    position:relative}
.article-content pre code{
    background-color:transparent;
    padding:0;
    color:inherit;
    font-size:0.875rem;
    line-height:1.6;
    border:none;
    display:block}
.article-content pre[data-language]::before{
    content:attr(data-language);
    position:absolute;
    top:0.5rem;
    right:0.5rem;
    font-size:0.75rem;
    color:rgba(255, 255, 255, 0.5);
    text-transform:uppercase;
    letter-spacing:0.05em;
    font-family:'Inter', sans-serif}
.article-content pre::-webkit-scrollbar{
    height:8px;
    width:8px}
.article-content pre::-webkit-scrollbar-track{
    background:#0f172a;
    border-radius:4px}
.article-content pre::-webkit-scrollbar-thumb{
    background:#475569;
    border-radius:4px}
.article-content pre::-webkit-scrollbar-thumb:hover{
    background:#64748b}
.article-content pre .comment{
    color:#94a3b8;
    font-style:italic}
.article-content pre .keyword{
    color:#c084fc;
    font-weight:600}
.article-content pre .string{
    color:#86efac}
.article-content pre .number{
    color:#fbbf24}
.article-content pre .function{
    color:#60a5fa}
.article-content img{
    max-width:100%;
    height:auto;
    border-radius:var(--radius-sm);
    margin:2rem 0;
    box-shadow:var(--shadow-md);
    display:block}
.article-content figure{
    margin:2rem 0}
.article-content figcaption{
    text-align:center;
    font-size:0.875rem;
    color:var(--text-light);
    margin-top:0.75rem;
    font-style:italic}
.article-content hr{
    border:none;
    border-top:2px solid var(--border);
    margin:3rem 0;
    opacity:0.5}
.article-content strong,
.article-content b{
    font-weight:700;
    color:var(--text)}
.article-content em,
.article-content i{
    font-style:italic;
    color:var(--text)}
.article-content strong{
    font-weight:700}
.article-content b{
    font-weight:600}
.article-content em{
    font-style:italic}
.article-content i{
    font-style:italic;
    opacity:0.95}
.article-content mark{
    background-color:var(--accent-light);
    color:var(--text);
    padding:0.125rem 0.25rem;
    border-radius:0.25rem}
.article-content abbr[title]{
    text-decoration:underline dotted;
    cursor:help;
    border-bottom:1px dotted var(--text-light)}
.article-content dl{
    margin:1.5rem 0}
.article-content dt{
    font-weight:700;
    color:var(--text);
    margin-top:1rem}
.article-content dd{
    margin-left:2rem;
    margin-bottom:0.5rem;
    color:var(--text-light)}
.article-content kbd{
    background-color:var(--bg-dark);
    border:1px solid var(--border-dark);
    border-radius:0.25rem;
    padding:0.125rem 0.5rem;
    font-family:'Fira Code', monospace;
    font-size:0.875em;
    box-shadow:0 2px 0 var(--border-dark)}
.article-content samp{
    font-family:'Fira Code', monospace;
    background-color:var(--bg-dark);
    padding:0.125rem 0.5rem;
    border-radius:0.25rem}
.article-content var{
    font-family:'Fira Code', monospace;
    font-style:italic;
    color:var(--primary)}
.article-content sub,
.article-content sup{
    font-size:0.75em;
    line-height:0;
    position:relative;
    vertical-align:baseline}
.article-content sup{
    top:-0.5em}
.article-content sub{
    bottom:-0.25em}
.article-content small{
    font-size:0.875em;
    color:var(--text-light)}
.article-content del{
    text-decoration:line-through;
    color:var(--danger);
    opacity:0.7}
.article-content ins{
    text-decoration:underline;
    color:var(--success);
    background-color:color-mix(in srgb, var(--success) 10%, transparent);
    padding:0.125rem 0.25rem;
    border-radius:0.25rem}
.article-content address{
    font-style:normal;
    line-height:1.8;
    margin:1.5rem 0;
    padding:1rem;
    background:var(--bg-light);
    border-left:3px solid var(--primary);
    border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.article-content details{
    margin:1.5rem 0;
    padding:1rem;
    background:var(--bg-light);
    border:1px solid var(--border);
    border-radius:var(--radius-sm)}
.article-content summary{
    font-weight:600;
    color:var(--primary);
    cursor:pointer;
    user-select:none;
    padding:0.5rem;
    margin:-0.5rem;
    border-radius:var(--radius-sm);
    transition:all 0.3s ease}
.article-content summary:hover{
    background:var(--primary-soft)}
.article-content details[open] summary{
    margin-bottom:1rem;
    border-bottom:1px solid var(--border);
    padding-bottom:0.75rem}
.article-content time{
    color:var(--text-light);
    font-style:italic}
.article-content pre:not(:has(code)){
    background:var(--bg-light);
    border:1px solid var(--border);
    padding:1rem;
    overflow-x:auto;
    font-family:'Courier New', monospace;
    color:var(--text);
    white-space:pre-wrap}
.article-content a:focus{
    outline:2px solid var(--primary);
    outline-offset:2px;
    border-radius:2px}
.article-content::selection{
    background-color:var(--primary-soft);
    color:var(--text)}
.article-content::-moz-selection{
    background-color:var(--primary-soft);
    color:var(--text)}
.article-content .sr-only{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0, 0, 0, 0);
    white-space:nowrap;
    border-width:0}
.article-content .text-center{
    text-align:center}
.article-content .text-right{
    text-align:right}
.article-content .text-left{
    text-align:left}
.article-content .img-left{
    float:left;
    margin:0.5rem 1.5rem 1rem 0;
    max-width:50%}
.article-content .img-right{
    float:right;
    margin:0.5rem 0 1rem 1.5rem;
    max-width:50%}
.article-content .img-center{
    display:block;
    margin-left:auto;
    margin-right:auto}
.article-content .clearfix::after{
    content:"";
    display:table;
    clear:both}
.article-content figure img{
    width:100%;
    height:auto}
@media (max-width:991px){
    .article-content{
        font-size:1rem}
    .article-content h1{
        font-size:2rem}
    .article-content h2{
        font-size:1.75rem}
    .article-content h3{
        font-size:1.375rem}
    .article-content h4{
        font-size:1.125rem}
    .article-content p:first-of-type{
        font-size:1.0625rem}
    .article-content .img-left,
    .article-content .img-right{
        max-width:40%}
}
@media (max-width:768px){
    .article-content{
        font-size:0.9375rem;
        line-height:1.7;
        text-align:left}
    .article-content h1{
        font-size:1.75rem;
        margin-top:2rem}
    .article-content h2{
        font-size:1.5rem;
        margin-top:2rem}
    .article-content h3{
        font-size:1.25rem}
    .article-content h4{
        font-size:1.125rem}
    .article-content h5{
        font-size:1rem}
    .article-content h6{
        font-size:0.9375rem}
    .article-content p:first-of-type{
        font-size:1rem}
    .article-content ul,
    .article-content ol{
        padding-left:1.5rem}
    .article-content blockquote{
        padding:1rem 1rem 1rem 1.5rem;
        margin:1.5rem 0}
    .article-content blockquote::before{
        font-size:3rem;
        top:-5px;
        left:5px}
    .article-content pre{
        padding:1rem;
        margin:1.5rem 0;
        font-size:0.8125rem}
    .article-content img{
        margin:1.5rem 0}
    .article-content .img-left,
    .article-content .img-right{
        float:none;
        max-width:100%;
        margin:1rem 0}
    .article-content table{
        font-size:0.8125rem}
}
@media (max-width:480px){
    .article-content{
        font-size:0.875rem}
    .article-content h1{
        font-size:1.5rem}
    .article-content h2{
        font-size:1.375rem}
    .article-content h3{
        font-size:1.125rem}
    .article-content h4,
    .article-content h5,
    .article-content h6{
        font-size:1rem}
    .article-content ul,
    .article-content ol{
        padding-left:1.25rem}
    .article-content li{
        margin-bottom:0.5rem}
    .article-content blockquote{
        padding:0.75rem 0.75rem 0.75rem 1.25rem}
    .article-content blockquote::before{
        font-size:2.5rem}
    .article-content pre{
        padding:0.75rem;
        font-size:0.75rem}
    .article-content table{
        font-size:0.75rem}
    .article-content thead th,
    .article-content td{
        padding:0.5rem}
}
@media (max-width:991px){
    .col-lg-4{
        margin-top:3rem}
    .sticky-top{
        position:relative !important;
        top:auto !important}
}
@media (max-width:767px){
    .related-articles-section .col-md-6{
        margin-bottom:1rem}
}
@media (max-width:576px){
    .popular-post-item img,
    .popular-post-item .bg-light{
        width:60px !important;
        height:60px !important}
    .popular-post-item h6{
        font-size:0.875rem}
}
@media print{
    .article-content{
        font-size:12pt;
        line-height:1.6;
        color:#000}
    .article-content h1,
    .article-content h2,
    .article-content h3,
    .article-content h4,
    .article-content h5,
    .article-content h6{
        page-break-after:avoid;
        color:#000}
    .article-content a{
        color:#000;
        text-decoration:underline}
    .article-content a[href]::after{
        content:" (" attr(href) ")";
        font-size:0.8em}
    .article-content pre,
    .article-content blockquote{
        page-break-inside:avoid;
        border:1px solid #000}
    .article-content img{
        max-width:100%;
        page-break-inside:avoid}
}
@media (min-width:992px){
    .blog-sidebar{
        position:relative}
    .blog-sidebar .sticky-top{
        position:sticky;
        top:20px}
}
@media (min-width:768px) and (max-width:991.98px){
    .blog-sidebar{
        margin-top:0}
    .blog-sidebar .card{
        margin-bottom:1.5rem}
}
@media (max-width:767.98px){
    .blog-sidebar{
        margin-top:3rem;
        order:2}
    .col-lg-8{
        order:1}
    .blog-sidebar .sticky-top{
        position:relative !important;
        top:auto !important}
    .blog-sidebar .card{
        margin-bottom:1.5rem}
    .popular-posts-widget .popular-post-thumbnail{
        width:60px !important;
        height:60px !important}
    .popular-posts-widget .popular-post-title{
        font-size:0.9rem}
}
.row{
    display:flex;
    flex-wrap:wrap}
.sidebar-ad-slot{
    margin-bottom:24px}
.sidebar-ad-slot .advertisement-container{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:12px;
    padding:16px;
    box-shadow:var(--shadow-sm);
    overflow:hidden;
    position:relative}
.sidebar-ad-slot .advertisement-container::before{
    content:'Advertisement';
    display:block;
    font-size:11px;
    color:var(--text-muted);
    text-transform:uppercase;
    letter-spacing:0.5px;
    margin-bottom:12px;
    font-weight:600}
.sidebar-ad-slot .advertisement-container img{
    max-width:100%;
    height:auto;
    border-radius:8px}
.sidebar-ad-slot .advertisement-container iframe{
    max-width:100%;
    border-radius:8px}
.advertisement-container{
    position:relative;
    overflow:hidden}
.in-content-ad{
    text-align:center;
    margin:32px 0;
    padding:24px 0;
    border-top:1px solid var(--border-light);
    border-bottom:1px solid var(--border-light)}
.in-content-ad .advertisement-container{
    display:inline-block;
    max-width:100%}
@media (max-width:991px){
    .sidebar-ad-slot{
        margin-bottom:20px}
    .sidebar-ad-slot .advertisement-container{
        padding:14px}
}
@media (max-width:768px){
    .sidebar-ad-slot{
        margin-bottom:16px}
    .sidebar-ad-slot .advertisement-container{
        padding:12px}
    .sidebar-ad-slot .advertisement-container::before{
        font-size:10px;
        margin-bottom:10px}
}
.in-content-ad{
    margin:32px 0;
    padding:24px 0;
    text-align:center;
    position:relative}
.in-content-ad::before{
    content:'Advertisement';
    display:block;
    font-size:11px;
    color:var(--text-muted);
    text-transform:uppercase;
    letter-spacing:0.5px;
    margin-bottom:12px;
    font-weight:600}
.in-content-ad .advertisement-container{
    display:inline-block;
    max-width:100%;
    margin:0 auto}
@media (max-width:768px){
    .in-content-ad{
        margin:24px 0;
        padding:16px 0}
    .in-content-ad .advertisement-container{
        max-width:100%}
}
.d-none{
    display:none !important}
.d-block{
    display:block !important}
.d-inline{
    display:inline !important}
.d-inline-block{
    display:inline-block !important}
.d-flex{
    display:flex !important}
.d-inline-flex{
    display:inline-flex !important}
.d-grid{
    display:grid !important}
.flex-row{
    flex-direction:row !important}
.flex-column{
    flex-direction:column !important}
.flex-wrap{
    flex-wrap:wrap !important}
.flex-nowrap{
    flex-wrap:nowrap !important}
.justify-start{
    justify-content:flex-start !important}
.justify-end{
    justify-content:flex-end !important}
.justify-center{
    justify-content:center !important}
.justify-between{
    justify-content:space-between !important}
.justify-around{
    justify-content:space-around !important}
.align-start{
    align-items:flex-start !important}
.align-end{
    align-items:flex-end !important}
.align-center{
    align-items:center !important}
.align-stretch{
    align-items:stretch !important}
.flex-1{
    flex:1 1 0% !important}
.flex-auto{
    flex:1 1 auto !important}
.flex-none{
    flex:none !important}
.grid-cols-1{
    grid-template-columns:repeat(1, minmax(0, 1fr)) !important}
.grid-cols-2{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important}
.grid-cols-3{
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important}
.grid-cols-4{
    grid-template-columns:repeat(4, minmax(0, 1fr)) !important}
.grid-cols-6{
    grid-template-columns:repeat(6, minmax(0, 1fr)) !important}
.grid-cols-12{
    grid-template-columns:repeat(12, minmax(0, 1fr)) !important}
.gap-0{
    gap:var(--space-0) !important}
.gap-1{
    gap:var(--space-1) !important}
.gap-2{
    gap:var(--space-2) !important}
.gap-3{
    gap:var(--space-3) !important}
.gap-4{
    gap:var(--space-4) !important}
.gap-5{
    gap:var(--space-5) !important}
.gap-6{
    gap:var(--space-6) !important}
.gap-8{
    gap:var(--space-8) !important}
.m-0{
    margin:var(--space-0) !important}
.m-1{
    margin:var(--space-1) !important}
.m-2{
    margin:var(--space-2) !important}
.m-3{
    margin:var(--space-3) !important}
.m-4{
    margin:var(--space-4) !important}
.m-5{
    margin:var(--space-5) !important}
.m-6{
    margin:var(--space-6) !important}
.m-8{
    margin:var(--space-8) !important}
.m-auto{
    margin:auto !important}
.mt-0{
    margin-top:var(--space-0) !important}
.mt-1{
    margin-top:var(--space-1) !important}
.mt-2{
    margin-top:var(--space-2) !important}
.mt-3{
    margin-top:var(--space-3) !important}
.mt-4{
    margin-top:var(--space-4) !important}
.mt-5{
    margin-top:var(--space-5) !important}
.mt-6{
    margin-top:var(--space-6) !important}
.mt-8{
    margin-top:var(--space-8) !important}
.mb-0{
    margin-bottom:var(--space-0) !important}
.mb-1{
    margin-bottom:var(--space-1) !important}
.mb-2{
    margin-bottom:var(--space-2) !important}
.mb-3{
    margin-bottom:var(--space-3) !important}
.mb-4{
    margin-bottom:var(--space-4) !important}
.mb-5{
    margin-bottom:var(--space-5) !important}
.mb-6{
    margin-bottom:var(--space-6) !important}
.mb-8{
    margin-bottom:var(--space-8) !important}
.ml-0{
    margin-left:var(--space-0) !important}
.ml-1{
    margin-left:var(--space-1) !important}
.ml-2{
    margin-left:var(--space-2) !important}
.ml-3{
    margin-left:var(--space-3) !important}
.ml-4{
    margin-left:var(--space-4) !important}
.ml-auto{
    margin-left:auto !important}
.mr-0{
    margin-right:var(--space-0) !important}
.mr-1{
    margin-right:var(--space-1) !important}
.mr-2{
    margin-right:var(--space-2) !important}
.mr-3{
    margin-right:var(--space-3) !important}
.mr-4{
    margin-right:var(--space-4) !important}
.mr-auto{
    margin-right:auto !important}
.mx-auto{
    margin-left:auto !important;
    margin-right:auto !important}
.p-0{
    padding:var(--space-0) !important}
.p-1{
    padding:var(--space-1) !important}
.p-2{
    padding:var(--space-2) !important}
.p-3{
    padding:var(--space-3) !important}
.p-4{
    padding:var(--space-4) !important}
.p-5{
    padding:var(--space-5) !important}
.p-6{
    padding:var(--space-6) !important}
.p-8{
    padding:var(--space-8) !important}
.pt-0{
    padding-top:var(--space-0) !important}
.pt-1{
    padding-top:var(--space-1) !important}
.pt-2{
    padding-top:var(--space-2) !important}
.pt-3{
    padding-top:var(--space-3) !important}
.pt-4{
    padding-top:var(--space-4) !important}
.pt-5{
    padding-top:var(--space-5) !important}
.pt-6{
    padding-top:var(--space-6) !important}
.pt-8{
    padding-top:var(--space-8) !important}
.pb-0{
    padding-bottom:var(--space-0) !important}
.pb-1{
    padding-bottom:var(--space-1) !important}
.pb-2{
    padding-bottom:var(--space-2) !important}
.pb-3{
    padding-bottom:var(--space-3) !important}
.pb-4{
    padding-bottom:var(--space-4) !important}
.pb-5{
    padding-bottom:var(--space-5) !important}
.pb-6{
    padding-bottom:var(--space-6) !important}
.pb-8{
    padding-bottom:var(--space-8) !important}
.pl-0{
    padding-left:var(--space-0) !important}
.pl-1{
    padding-left:var(--space-1) !important}
.pl-2{
    padding-left:var(--space-2) !important}
.pl-3{
    padding-left:var(--space-3) !important}
.pl-4{
    padding-left:var(--space-4) !important}
.pr-0{
    padding-right:var(--space-0) !important}
.pr-1{
    padding-right:var(--space-1) !important}
.pr-2{
    padding-right:var(--space-2) !important}
.pr-3{
    padding-right:var(--space-3) !important}
.pr-4{
    padding-right:var(--space-4) !important}
.text-left{
    text-align:left !important}
.text-center{
    text-align:center !important}
.text-right{
    text-align:right !important}
.text-xs{
    font-size:var(--text-xs) !important}
.text-sm{
    font-size:var(--text-sm) !important}
.text-base{
    font-size:var(--text-base) !important}
.text-lg{
    font-size:var(--text-lg) !important}
.text-xl{
    font-size:var(--text-xl) !important}
.text-2xl{
    font-size:var(--text-2xl) !important}
.text-3xl{
    font-size:var(--text-3xl) !important}
.text-4xl{
    font-size:var(--text-4xl) !important}
.font-light{
    font-weight:var(--font-light) !important}
.font-normal{
    font-weight:var(--font-normal) !important}
.font-medium{
    font-weight:var(--font-medium) !important}
.font-semibold{
    font-weight:var(--font-semibold) !important}
.font-bold{
    font-weight:var(--font-bold) !important}
.font-extrabold{
    font-weight:var(--font-extrabold) !important}
.leading-none{
    line-height:var(--leading-none) !important}
.leading-tight{
    line-height:var(--leading-tight) !important}
.leading-normal{
    line-height:var(--leading-normal) !important}
.leading-relaxed{
    line-height:var(--leading-relaxed) !important}
.leading-loose{
    line-height:var(--leading-loose) !important}
.text-primary{
    color:var(--primary) !important}
.text-secondary{
    color:var(--secondary) !important}
.text-accent{
    color:var(--accent) !important}
.text-success{
    color:var(--success) !important}
.text-warning{
    color:var(--warning) !important}
.text-danger{
    color:var(--danger) !important}
.text-muted{
    color:var(--text-muted) !important}
.text-light{
    color:var(--text-light) !important}
.text-white{
    color:#ffffff !important}
.bg-primary{
    background-color:var(--primary) !important}
.bg-primary-light{
    background-color:var(--primary-light) !important}
.bg-primary-soft{
    background-color:var(--primary-soft) !important}
.bg-secondary{
    background-color:var(--secondary) !important}
.bg-accent{
    background-color:var(--accent) !important}
.bg-white{
    background-color:#ffffff !important}
.bg-light{
    background-color:var(--bg-light) !important}
.bg-dark{
    background-color:var(--bg-dark) !important}
.border{
    border:1px solid var(--border) !important}
.border-0{
    border:0 !important}
.border-t{
    border-top:1px solid var(--border) !important}
.border-b{
    border-bottom:1px solid var(--border) !important}
.border-l{
    border-left:1px solid var(--border) !important}
.border-r{
    border-right:1px solid var(--border) !important}
.rounded{
    border-radius:var(--radius) !important}
.rounded-sm{
    border-radius:var(--radius-sm) !important}
.rounded-lg{
    border-radius:var(--radius-lg) !important}
.rounded-xl{
    border-radius:var(--radius-xl) !important}
.rounded-full{
    border-radius:9999px !important}
.rounded-none{
    border-radius:0 !important}
.shadow-none{
    box-shadow:none !important}
.shadow-sm{
    box-shadow:var(--shadow-sm) !important}
.shadow-md{
    box-shadow:var(--shadow-md) !important}
.shadow-lg{
    box-shadow:var(--shadow-lg) !important}
.shadow-xl{
    box-shadow:var(--shadow-xl) !important}
.w-full{
    width:100% !important}
.w-auto{
    width:auto !important}
.w-screen{
    width:100vw !important}
.w-50{
    width:50% !important}
.w-25{
    width:25% !important}
.w-75{
    width:75% !important}
.h-full{
    height:100% !important}
.h-auto{
    height:auto !important}
.h-screen{
    height:100vh !important}
.max-w-full{
    max-width:100% !important}
.max-w-screen-sm{
    max-width:576px !important}
.max-w-screen-md{
    max-width:768px !important}
.max-w-screen-lg{
    max-width:992px !important}
.max-w-screen-xl{
    max-width:1200px !important}
.position-relative{
    position:relative !important}
.position-absolute{
    position:absolute !important}
.position-fixed{
    position:fixed !important}
.position-sticky{
    position:sticky !important}
.overflow-hidden{
    overflow:hidden !important}
.overflow-auto{
    overflow:auto !important}
.overflow-visible{
    overflow:visible !important}
@media (min-width:576px){
    .d-sm-none{
        display:none !important}
    .d-sm-block{
        display:block !important}
    .d-sm-flex{
        display:flex !important}
    .d-sm-grid{
        display:grid !important}
    .flex-sm-row{
        flex-direction:row !important}
    .flex-sm-column{
        flex-direction:column !important}
    .grid-cols-sm-1{
        grid-template-columns:repeat(1, minmax(0, 1fr)) !important}
    .grid-cols-sm-2{
        grid-template-columns:repeat(2, minmax(0, 1fr)) !important}
    .grid-cols-sm-3{
        grid-template-columns:repeat(3, minmax(0, 1fr)) !important}
    .text-sm-left{
        text-align:left !important}
    .text-sm-center{
        text-align:center !important}
    .text-sm-right{
        text-align:right !important}
    .justify-sm-start{
        justify-content:flex-start !important}
    .justify-sm-center{
        justify-content:center !important}
    .justify-sm-end{
        justify-content:flex-end !important}
    .justify-sm-between{
        justify-content:space-between !important}
}
@media (min-width:768px){
    .d-md-none{
        display:none !important}
    .d-md-block{
        display:block !important}
    .d-md-flex{
        display:flex !important}
    .d-md-grid{
        display:grid !important}
    .flex-md-row{
        flex-direction:row !important}
    .flex-md-column{
        flex-direction:column !important}
    .grid-cols-md-1{
        grid-template-columns:repeat(1, minmax(0, 1fr)) !important}
    .grid-cols-md-2{
        grid-template-columns:repeat(2, minmax(0, 1fr)) !important}
    .grid-cols-md-3{
        grid-template-columns:repeat(3, minmax(0, 1fr)) !important}
    .grid-cols-md-4{
        grid-template-columns:repeat(4, minmax(0, 1fr)) !important}
    .text-md-left{
        text-align:left !important}
    .text-md-center{
        text-align:center !important}
    .text-md-right{
        text-align:right !important}
    .justify-md-start{
        justify-content:flex-start !important}
    .justify-md-center{
        justify-content:center !important}
    .justify-md-end{
        justify-content:flex-end !important}
    .justify-md-between{
        justify-content:space-between !important}
    .mt-md-0{
        margin-top:var(--space-0) !important}
    .mt-md-4{
        margin-top:var(--space-4) !important}
    .mt-md-6{
        margin-top:var(--space-6) !important}
    .mt-md-8{
        margin-top:var(--space-8) !important}
    .mb-md-0{
        margin-bottom:var(--space-0) !important}
    .mb-md-4{
        margin-bottom:var(--space-4) !important}
    .mb-md-6{
        margin-bottom:var(--space-6) !important}
    .mb-md-8{
        margin-bottom:var(--space-8) !important}
    .p-md-4{
        padding:var(--space-4) !important}
    .p-md-6{
        padding:var(--space-6) !important}
    .p-md-8{
        padding:var(--space-8) !important}
}
@media (min-width:992px){
    .d-lg-none{
        display:none !important}
    .d-lg-block{
        display:block !important}
    .d-lg-flex{
        display:flex !important}
    .d-lg-grid{
        display:grid !important}
    .flex-lg-row{
        flex-direction:row !important}
    .flex-lg-column{
        flex-direction:column !important}
    .grid-cols-lg-1{
        grid-template-columns:repeat(1, minmax(0, 1fr)) !important}
    .grid-cols-lg-2{
        grid-template-columns:repeat(2, minmax(0, 1fr)) !important}
    .grid-cols-lg-3{
        grid-template-columns:repeat(3, minmax(0, 1fr)) !important}
    .grid-cols-lg-4{
        grid-template-columns:repeat(4, minmax(0, 1fr)) !important}
    .grid-cols-lg-6{
        grid-template-columns:repeat(6, minmax(0, 1fr)) !important}
    .text-lg-left{
        text-align:left !important}
    .text-lg-center{
        text-align:center !important}
    .text-lg-right{
        text-align:right !important}
    .justify-lg-start{
        justify-content:flex-start !important}
    .justify-lg-center{
        justify-content:center !important}
    .justify-lg-end{
        justify-content:flex-end !important}
    .justify-lg-between{
        justify-content:space-between !important}
    .mt-lg-0{
        margin-top:var(--space-0) !important}
    .mt-lg-4{
        margin-top:var(--space-4) !important}
    .mt-lg-6{
        margin-top:var(--space-6) !important}
    .mt-lg-8{
        margin-top:var(--space-8) !important}
    .mb-lg-0{
        margin-bottom:var(--space-0) !important}
    .mb-lg-4{
        margin-bottom:var(--space-4) !important}
    .mb-lg-6{
        margin-bottom:var(--space-6) !important}
    .mb-lg-8{
        margin-bottom:var(--space-8) !important}
    .p-lg-4{
        padding:var(--space-4) !important}
    .p-lg-6{
        padding:var(--space-6) !important}
    .p-lg-8{
        padding:var(--space-8) !important}
}
@media (min-width:1200px){
    .d-xl-none{
        display:none !important}
    .d-xl-block{
        display:block !important}
    .d-xl-flex{
        display:flex !important}
    .d-xl-grid{
        display:grid !important}
    .grid-cols-xl-4{
        grid-template-columns:repeat(4, minmax(0, 1fr)) !important}
    .grid-cols-xl-6{
        grid-template-columns:repeat(6, minmax(0, 1fr)) !important}
    .text-xl-left{
        text-align:left !important}
    .text-xl-center{
        text-align:center !important}
    .text-xl-right{
        text-align:right !important}
}
.sr-only{
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    padding:0 !important;
    margin:-1px !important;
    overflow:hidden !important;
    clip:rect(0, 0, 0, 0) !important;
    white-space:nowrap !important;
    border-width:0 !important}
.focus-visible:focus{
    outline:2px solid var(--primary) !important;
    outline-offset:2px !important}
.cursor-pointer{
    cursor:pointer !important}
.cursor-default{
    cursor:default !important}
.cursor-not-allowed{
    cursor:not-allowed !important}
.pointer-events-none{
    pointer-events:none !important}
.pointer-events-auto{
    pointer-events:auto !important}
.select-none{
    user-select:none !important}
.select-text{
    user-select:text !important}
.select-all{
    user-select:all !important}
.transition-all{
    transition-property:all !important;
    transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1) !important;
    transition-duration:150ms !important}
.transition-colors{
    transition-property:color, background-color, border-color !important;
    transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1) !important;
    transition-duration:150ms !important}
.transition-transform{
    transition-property:transform !important;
    transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1) !important;
    transition-duration:150ms !important}
.duration-150{
    transition-duration:150ms !important}
.duration-300{
    transition-duration:300ms !important}
.duration-500{
    transition-duration:500ms !important}
.scale-100{
    transform:scale(1) !important}
.scale-105{
    transform:scale(1.05) !important}
.scale-110{
    transform:scale(1.1) !important}
.rotate-0{
    transform:rotate(0deg) !important}
.rotate-45{
    transform:rotate(45deg) !important}
.rotate-90{
    transform:rotate(90deg) !important}
.rotate-180{
    transform:rotate(180deg) !important}
.translate-y-0{
    transform:translateY(0) !important}
.translate-y-1{
    transform:translateY(0.25rem) !important}
.translate-y-2{
    transform:translateY(0.5rem) !important}
.z-0{
    z-index:0 !important}
.z-10{
    z-index:10 !important}
.z-20{
    z-index:20 !important}
.z-30{
    z-index:30 !important}
.z-40{
    z-index:40 !important}
.z-50{
    z-index:50 !important}
.z-auto{
    z-index:auto !important}
.opacity-0{
    opacity:0 !important}
.opacity-25{
    opacity:0.25 !important}
.opacity-50{
    opacity:0.5 !important}
.opacity-75{
    opacity:0.75 !important}
.opacity-100{
    opacity:1 !important}
.bg-gradient-primary{
    background:var(--gradient-primary) !important}
.bg-gradient-accent{
    background:var(--gradient-accent) !important}
.bg-gradient-soft{
    background:var(--gradient-soft) !important}
.text-on-primary{
    color:#ffffff !important}
.text-on-accent{
    color:#0F172A !important}
.text-on-dark{
    color:#ffffff !important}
.text-on-light{
    color:#0F172A !important}
.bg-success-light{
    background-color:var(--success-light) !important;
    color:#ffffff !important}
.bg-warning-light{
    background-color:var(--warning-light) !important;
    color:#0F172A !important}
.bg-danger-light{
    background-color:var(--danger-light) !important;
    color:#ffffff !important}
.bg-info-light{
    background-color:var(--info-light) !important;
    color:#ffffff !important}
.font-sans{
    font-family:var(--font-sans) !important}
.font-serif{
    font-family:var(--font-serif) !important}
.font-mono{
    font-family:var(--font-mono) !important}
.heading-1{
    font-size:var(--text-5xl);
    font-weight:var(--font-extrabold);
    line-height:var(--leading-tight);
    color:var(--text);
    letter-spacing:-0.02em}
.heading-2{
    font-size:var(--text-4xl);
    font-weight:var(--font-bold);
    line-height:var(--leading-tight);
    color:var(--text);
    letter-spacing:-0.01em}
.heading-3{
    font-size:var(--text-3xl);
    font-weight:var(--font-bold);
    line-height:var(--leading-snug);
    color:var(--text)}
.heading-4{
    font-size:var(--text-2xl);
    font-weight:var(--font-semibold);
    line-height:var(--leading-snug);
    color:var(--text)}
.heading-5{
    font-size:var(--text-xl);
    font-weight:var(--font-semibold);
    line-height:var(--leading-normal);
    color:var(--text)}
.heading-6{
    font-size:var(--text-lg);
    font-weight:var(--font-semibold);
    line-height:var(--leading-normal);
    color:var(--text)}
.body-large{
    font-size:var(--text-lg);
    line-height:var(--leading-relaxed);
    color:var(--text)}
.body-base{
    font-size:var(--text-base);
    line-height:var(--leading-normal);
    color:var(--text)}
.body-small{
    font-size:var(--text-sm);
    line-height:var(--leading-normal);
    color:var(--text-light)}
.caption{
    font-size:var(--text-xs);
    line-height:var(--leading-normal);
    color:var(--text-muted)}
.text-uppercase{
    text-transform:uppercase !important}
.text-lowercase{
    text-transform:lowercase !important}
.text-capitalize{
    text-transform:capitalize !important}
.text-normal-case{
    text-transform:none !important}
.text-underline{
    text-decoration:underline !important}
.text-line-through{
    text-decoration:line-through !important}
.text-no-underline{
    text-decoration:none !important}
.text-italic{
    font-style:italic !important}
.text-not-italic{
    font-style:normal !important}
.tracking-tighter{
    letter-spacing:-0.05em !important}
.tracking-tight{
    letter-spacing:-0.025em !important}
.tracking-normal{
    letter-spacing:0em !important}
.tracking-wide{
    letter-spacing:0.025em !important}
.tracking-wider{
    letter-spacing:0.05em !important}
.tracking-widest{
    letter-spacing:0.1em !important}
.section-padding{
    padding-top:var(--space-12);
    padding-bottom:var(--space-12)}
.section-padding-lg{
    padding-top:var(--space-16);
    padding-bottom:var(--space-16)}
.section-padding-xl{
    padding-top:var(--space-20);
    padding-bottom:var(--space-20)}
@media (min-width:768px){
    .section-padding{
        padding-top:var(--space-16);
        padding-bottom:var(--space-16)}
    .section-padding-lg{
        padding-top:var(--space-20);
        padding-bottom:var(--space-20)}
    .section-padding-xl{
        padding-top:var(--space-24);
        padding-bottom:var(--space-24)}
}
@media (min-width:992px){
    .section-padding{
        padding-top:var(--space-20);
        padding-bottom:var(--space-20)}
    .section-padding-lg{
        padding-top:var(--space-24);
        padding-bottom:var(--space-24)}
    .section-padding-xl{
        padding-top:var(--space-32);
        padding-bottom:var(--space-32)}
}
.container-padding{
    padding-left:var(--gutter);
    padding-right:var(--gutter)}
.card-padding{
    padding:var(--space-4)}
.card-padding-lg{
    padding:var(--space-6)}
@media (min-width:768px){
    .card-padding{
        padding:var(--space-6)}
    .card-padding-lg{
        padding:var(--space-8)}
}
.focus-ring:focus{
    outline:2px solid var(--primary);
    outline-offset:2px;
    box-shadow:0 0 0 4px color-mix(in srgb, var(--primary) 15%, transparent)}
.focus-ring-accent:focus{
    outline:2px solid var(--accent);
    outline-offset:2px;
    box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 15%, transparent)}
@media (prefers-contrast:high){
    :root{
        --border:#000000;
        --text-light:#1E293B;
        --text-muted:#334155}
    .btn{
        border:2px solid currentColor}
}
@media (prefers-reduced-motion:reduce){
    *,
    *::before,
    *::after{
        animation-duration:0.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:0.01ms !important;
        scroll-behavior:auto !important}
}
@media print{
    body{
        background:white;
        color:black}
    .navbar-modern,
    .footer-modern,
    .btn,
    .cta-block{
        display:none !important}
    a{
        text-decoration:underline}
    a[href]:after{
        content:" (" attr(href) ")"}
}


.work-particle{
    position:absolute;
    background:rgba(255, 255, 255, 0.4);
    border-radius:50%;
    border:1px solid rgba(255, 255, 255, 0.3);
    animation:particleFloat 12s ease-in-out infinite;
    box-shadow:0 0 15px rgba(255, 255, 255, 0.3)}
@keyframes particleFloat{
    0%,
    100%{
        transform:translateY(0) scale(1);
        opacity:0.4}
    50%{
        transform:translateY(-50px) scale(1.3);
        opacity:0.7}
}