* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Kanit', sans-serif;
    line-height: 1.6;
    color: #333;
    overflow-x: hidden;
}

/* Custom Colors */
:root {
    --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    --success-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    --warning-gradient: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    --purple-gradient: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
    --orange-gradient: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
    --primary-color: #667eea;
    --secondary-color: #6c757d;
    --dark-color: #2c3e50;
    --light-color: #f8f9fa;
    --white: #ffffff;
    --shadow-lg: 0 15px 40px rgba(0,0,0,0.1);
    --shadow-xl: 0 25px 60px rgba(0,0,0,0.15);
}

/* Animated Background */
.animated-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
}

.animated-bg::before {
    content: '';
    position: absolute;
    width: 200%;
    height: 200%;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="75" cy="75" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="50" cy="10" r="0.5" fill="rgba(255,255,255,0.08)"/><circle cx="10" cy="50" r="0.5" fill="rgba(255,255,255,0.08)"/><circle cx="90" cy="30" r="0.5" fill="rgba(255,255,255,0.08)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
    animation: float 20s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    33% { transform: translate(30px, -30px) rotate(120deg); }
    66% { transform: translate(-20px, 20px) rotate(240deg); }
}

/* Particles */
.particles {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
}

.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(255,255,255,0.8);
    border-radius: 50%;
    animation: particles 15s linear infinite;
}

@keyframes particles {
    0% {
        transform: translateY(100vh) translateX(0);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(-100px) translateX(100px);
        opacity: 0;
    }
}

/* Header */
.navbar {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(20px);
    box-shadow: 0 8px 40px rgba(0,0,0,0.1);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border-bottom: 1px solid rgba(255,255,255,0.2);
}

.navbar.scrolled {
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 12px 50px rgba(0,0,0,0.15);
    transform: translateY(0);
}

.navbar-brand {
    font-weight: 800;
    font-size: 1.8rem;
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
}

.navbar-brand::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 3px;
    background: var(--primary-gradient);
    transition: width 0.3s ease;
}

.navbar-brand:hover::after {
    width: 100%;
}

.nav-link {
    font-weight: 600;
    margin: 0 15px;
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 1.05rem;
}

.nav-link::before {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    width: 0;
    height: 3px;
    background: var(--primary-gradient);
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.nav-link:hover {
    color: var(--primary-color) !important;
    transform: translateY(-2px);
}

.nav-link:hover::before {
    width: 100%;
}

/* Hero Section */
.hero {
    background: var(--primary-gradient);
    color: white;
    min-height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.2);
    z-index: 2;
}

.hero-content {
    position: relative;
    z-index: 3;
}

.hero h1 {
    font-size: 4rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
    background: linear-gradient(45deg, #ffffff 0%, #f0f0f0 50%, #ffffff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 4px 20px rgba(0,0,0,0.3);
    line-height: 1.2;
}

.hero-subtitle {
    font-size: 1.4rem;
    margin-bottom: 2.5rem;
    opacity: 0.95;
    line-height: 1.6;
    max-width: 600px;
}

.btn-hero {
    background: var(--warning-gradient);
    color: var(--dark-color);
    border: none;
    padding: 18px 40px;
    font-size: 1.2rem;
    font-weight: 700;
    border-radius: 50px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 10px 30px rgba(255, 193, 7, 0.3);
    position: relative;
    overflow: hidden;
}

.btn-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    transition: left 0.5s;
}

.btn-hero:hover::before {
    left: 100%;
}

.btn-hero:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 20px 40px rgba(255, 193, 7, 0.4);
}

.hero-animation {
    position: relative;
    z-index: 3;
}

.floating-icon {
    position: absolute;
    font-size: 3rem;
    opacity: 0.1;
    animation: float-icons 6s ease-in-out infinite;
}

.floating-icon:nth-child(1) { top: 10%; left: 10%; animation-delay: 0s; }
.floating-icon:nth-child(2) { top: 20%; right: 10%; animation-delay: 1s; }
.floating-icon:nth-child(3) { bottom: 30%; left: 15%; animation-delay: 2s; }
.floating-icon:nth-child(4) { bottom: 10%; right: 20%; animation-delay: 3s; }

@keyframes float-icons {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(180deg); }
}

/* Glowing Cards */
.glow-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.glow-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
    transition: left 0.8s;
}

.glow-card:hover::before {
    left: 100%;
}

.glow-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 25px 60px rgba(0,0,0,0.3);
    border-color: rgba(255, 255, 255, 0.4);
}

/* Section Styling */
.section {
    padding: 100px 0;
    position: relative;
}

.section-title {
    text-align: center;
    margin-bottom: 80px;
    position: relative;
}

.section-title h2 {
    font-size: 3rem;
    font-weight: 800;
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 20px;
    position: relative;
}

.section-title h2::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 4px;
    background: var(--primary-gradient);
    border-radius: 2px;
}

.section-title p {
    font-size: 1.2rem;
    color: var(--secondary-color);
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.8;
}

/* Enhanced Portfolio */
.portfolio-item {
    background: var(--white);
    border-radius: 25px;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    margin-bottom: 40px;
    position: relative;
    border: 1px solid rgba(255,255,255,0.1);
}

.portfolio-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: var(--primary-gradient);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.portfolio-item:hover::before {
    transform: scaleX(1);
}

.portfolio-item:hover {
    transform: translateY(-15px) rotateX(5deg);
    box-shadow: var(--shadow-xl);
}

.portfolio-img {
    height: 280px;
    background: var(--primary-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.3rem;
    font-weight: 700;
    position: relative;
    overflow: hidden;
}

.portfolio-img::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
    transition: all 0.6s ease;
    transform: translate(-50%, -50%);
}

.portfolio-item:hover .portfolio-img::before {
    width: 500px;
    height: 500px;
}

.portfolio-content {
    padding: 35px;
    position: relative;
}

.portfolio-content h5 {
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--dark-color);
    font-size: 1.3rem;
}

.portfolio-content p {
    color: var(--secondary-color);
    margin-bottom: 20px;
    line-height: 1.6;
}

.portfolio-tag {
    background: var(--success-gradient);
    color: white;
    padding: 8px 18px;
    border-radius: 25px;
    font-size: 0.9rem;
    font-weight: 600;
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 10px;
    box-shadow: 0 4px 15px rgba(79, 172, 254, 0.3);
    transition: all 0.3s ease;
}

.portfolio-tag:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(79, 172, 254, 0.4);
}

/* 3D Client Logos */
.client-logo {
    background: var(--white);
    border-radius: 20px;
    padding: 40px;
    text-align: center;
    box-shadow: var(--shadow-lg);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    margin-bottom: 40px;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.client-logo::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--primary-gradient);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.client-logo:hover::before {
    opacity: 0.1;
}

.client-logo:hover {
    transform: translateY(-10px) rotateY(10deg) rotateX(10deg);
    box-shadow: var(--shadow-xl);
}

.client-logo i {
    font-size: 4rem;
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

.client-logo:hover i {
    transform: scale(1.2);
}

/* Enhanced Blog */
.blog-item {
    background: var(--white);
    border-radius: 25px;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    margin-bottom: 40px;
    position: relative;
}

.blog-item:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: var(--shadow-xl);
}

.blog-img {
    height: 250px;
    background: var(--secondary-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
    font-weight: 700;
    position: relative;
    overflow: hidden;
}

.blog-img::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(to top, rgba(0,0,0,0.3), transparent);
}

.blog-content {
    padding: 35px;
}

.blog-date {
    color: var(--primary-color);
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.blog-content h5 {
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--dark-color);
    font-size: 1.3rem;
    line-height: 1.4;
}

.blog-content p {
    color: var(--secondary-color);
    margin-bottom: 25px;
    line-height: 1.7;
}

.read-more {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 700;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.read-more:hover {
    color: var(--dark-color);
    transform: translateX(5px);
}

/* Animated Stats */
.stats {
    background: var(--dark-color);
    color: white;
    position: relative;
    overflow: hidden;
}

.stats::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><polygon fill="rgba(255,255,255,0.02)" points="0,0 100,30 100,100 0,70"/></svg>');
}

.stat-item {
    text-align: center;
    padding: 50px 20px;
    position: relative;
    z-index: 1;
}

.stat-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 5px;
    background: var(--warning-gradient);
    border-radius: 3px;
}

.stat-number {
    font-size: 4rem;
    font-weight: 800;
    background: var(--warning-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: block;
    margin-bottom: 15px;
}

.stat-label {
    font-size: 1.2rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Premium Newsletter */
.newsletter {
    background: var(--primary-gradient);
    color: white;
    position: relative;
    overflow: hidden;
}

.newsletter::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="80" cy="80" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="40" cy="70" r="0.5" fill="rgba(255,255,255,0.05)"/></svg>');
}

.newsletter-form {
    max-width: 600px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.newsletter-input {
    border: none;
    border-radius: 50px;
    padding: 20px 30px;
    margin-bottom: 25px;
    width: 100%;
    font-size: 1.1rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.newsletter-input:focus {
    outline: none;
    box-shadow: 0 15px 40px rgba(0,0,0,0.2);
    transform: translateY(-2px);
}

.newsletter-btn {
    background: var(--warning-gradient);
    color: var(--dark-color);
    border: none;
    border-radius: 50px;
    padding: 20px 40px;
    font-weight: 700;
    font-size: 1.1rem;
    width: 100%;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 10px 30px rgba(255, 193, 7, 0.3);
}

.newsletter-btn:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 20px 40px rgba(255, 193, 7, 0.4);
}

/* Luxury Footer */
.footer {
    background: var(--dark-color);
    color: white;
    padding: 80px 0 40px;
    position: relative;
    overflow: hidden;
}

.footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: var(--primary-gradient);
}

.footer h5 {
    background: var(--warning-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 25px;
    font-weight: 700;
    font-size: 1.3rem;
}

.footer ul {
    list-style: none;
    padding: 0;
}

.footer ul li {
    margin-bottom: 12px;
}

.footer ul li a {
    color: #adb5bd;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.footer ul li a:hover {
    color: white;
    transform: translateX(5px);
}

.social-links a {
    display: inline-block;
    width: 50px;
    height: 50px;
    background: var(--primary-gradient);
    color: white;
    text-align: center;
    line-height: 50px;
    border-radius: 50%;
    margin-right: 15px;
    font-size: 1.2rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 5px 20px rgba(102, 126, 234, 0.3);
}

.social-links a:hover {
    background: var(--warning-gradient);
    color: var(--dark-color);
    transform: translateY(-5px) scale(1.1);
    box-shadow: 0 10px 30px rgba(255, 193, 7, 0.4);
}

/* 3D Floating Buttons */
.floating-buttons {
    position: fixed;
    right: 30px;
    bottom: 30px;
    z-index: 1000;
}

.floating-btn {
    display: block;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    text-align: center;
    line-height: 70px;
    font-size: 1.6rem;
    margin-bottom: 20px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.2);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

.floating-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: left 0.6s;
}

.floating-btn:hover::before {
    left: 100%;
}

.floating-btn:hover {
    transform: translateY(-5px) scale(1.15);
    box-shadow: 0 15px 40px rgba(0,0,0,0.3);
    color: white;
}

.floating-btn.phone {
    background: var(--success-gradient);
    color: white;
}

.floating-btn.line {
    background: linear-gradient(135deg, #00B900 0%, #00f2fe 100%);
    color: white;
}

.floating-btn.facebook {
    background: linear-gradient(135deg, #1877F2 0%, #42a5f5 100%);
    color: white;
}

/* Premium Notification */
.notification {
    position: fixed;
    top: 30px;
    right: 30px;
    background: var(--white);
    color: var(--dark-color);
    padding: 25px 30px;
    border-radius: 15px;
    box-shadow: var(--shadow-xl);
    z-index: 1001;
    display: none;
    max-width: 350px;
    border-left: 5px solid var(--primary-color);
}

.notification.show {
    display: block;
    animation: slideInRight 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.notification.success {
    border-left-color: #28a745;
}

.notification.error {
    border-left-color: #dc3545;
}

/* Advanced Animations */
@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(100%) scale(0.8);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes bounce {
    0%, 20%, 53%, 80%, 100% {
        transform: translate3d(0,0,0);
    }
    40%, 43% {
        transform: translate3d(0, -30px, 0);
    }
    70% {
        transform: translate3d(0, -15px, 0);
    }
    90% {
        transform: translate3d(0, -4px, 0);
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

/* Hover Effects */
.hover-scale {
    transition: transform 0.3s ease;
}

.hover-scale:hover {
    transform: scale(1.05);
}

.hover-glow:hover {
    box-shadow: 0 0 30px rgba(102, 126, 234, 0.3);
}

/* Responsive Enhancements */
@media (max-width: 768px) {
    .hero h1 {
        font-size: 2.8rem;
    }

    .section-title h2 {
        font-size: 2.2rem;
    }

    .floating-buttons {
        right: 20px;
        bottom: 20px;
    }
    .hero-content {
        margin-top: 150px !important;
  }

  .floating-btn {
    width: 60px;
    height: 60px;
    line-height: 60px;
    font-size: 1.3rem;
}

.stat-number {
    font-size: 3rem;
}
}

@media (max-width: 576px) {
    .hero h1 {
        font-size: 2.2rem;
    }

    .section {
        padding: 60px 0;
    }

    .portfolio-content, .blog-content {
        padding: 25px;
    }
}

/* Allmediastudio Style v1 (extended) */
/* ============= GLOBAL ============= */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Kanit',sans-serif;line-height:1.6;color:#333;overflow-x:hidden}
:root{
  --primary-gradient:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
  --secondary-gradient:linear-gradient(135deg,#f093fb 0%,#f5576c 100%);
  --success-gradient:linear-gradient(135deg,#4facfe 0%,#00f2fe 100%);
  --warning-gradient:linear-gradient(135deg,#43e97b 0%,#38f9d7 100%);
  --purple-gradient:linear-gradient(135deg,#a8edea 0%,#fed6e3 100%);
  --orange-gradient:linear-gradient(135deg,#ffecd2 0%,#fcb69f 100%);
  --primary-color:#667eea;--secondary-color:#6c757d;--dark-color:#2c3e50;--light-color:#f8f9fa;--white:#fff;
  --shadow-lg:0 15px 40px rgba(0,0,0,.1);--shadow-xl:0 25px 60px rgba(0,0,0,.15)
}
/* ============= NAVBAR ============= */
.navbar{background:rgba(255,255,255,.95)!important;backdrop-filter:blur(20px);box-shadow:0 8px 40px rgba(0,0,0,.1);transition:all .4s cubic-bezier(.4,0,.2,1);border-bottom:1px solid rgba(255,255,255,.2)}
.navbar.scrolled{background:rgba(255,255,255,.98)!important;box-shadow:0 12px 50px rgba(0,0,0,.15)}
.navbar-brand{font-weight:800;font-size:1.8rem;background:var(--primary-gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;position:relative}
.navbar-brand::after{content:'';position:absolute;bottom:-5px;left:0;width:0;height:3px;background:var(--primary-gradient);transition:width .3s ease}
.navbar-brand:hover::after{width:100%}
.nav-link{font-weight:600;margin:0 15px;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1);font-size:1.05rem}
.nav-link::before{content:'';position:absolute;bottom:-5px;left:50%;width:0;height:3px;background:var(--primary-gradient);transition:all .3s ease;transform:translateX(-50%)}
.nav-link:hover,.nav-link.active{color:var(--primary-color)!important;transform:translateY(-2px)}
.nav-link:hover::before,.nav-link.active::before{width:100%}
/* ============= HERO (Index only) ============= */
.hero{background:var(--primary-gradient);color:#fff;min-height:100vh;display:flex;align-items:center;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;inset:0;background:rgba(0,0,0,.2);z-index:2}
.hero-content{position:relative;z-index:3}
.hero h1{font-size:4rem;font-weight:800;margin-bottom:1.5rem;background:linear-gradient(45deg,#fff 0%,#f0f0f0 50%,#fff 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 4px 20px rgba(0,0,0,.3);line-height:1.2}
.hero-subtitle{font-size:1.4rem;margin-bottom:2.5rem;opacity:.95;line-height:1.6;max-width:600px}
.animated-bg{position:absolute;inset:0;overflow:hidden;z-index:0}
.animated-bg::before{content:'';position:absolute;width:200%;height:200%;background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="g" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="75" cy="75" r="1" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23g)"/></svg>');animation:float 20s ease-in-out infinite}
@keyframes float{0%,100%{transform:translate(0,0) rotate(0)}33%{transform:translate(30px,-30px) rotate(120deg)}66%{transform:translate(-20px,20px) rotate(240deg)}}
.particles{position:absolute;inset:0;overflow:hidden;z-index:1}
.particle{position:absolute;width:4px;height:4px;background:rgba(255,255,255,.8);border-radius:50%;animation:particles 15s linear infinite}
@keyframes particles{0%{transform:translateY(100vh) translateX(0);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translateY(-100px) translateX(100px);opacity:0}}
.floating-icon{position:absolute;font-size:3rem;opacity:.1;animation:float-icons 6s ease-in-out infinite}
@keyframes float-icons{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-20px) rotate(180deg)}}
/* ============= BUTTONS ============= */
.btn-hero{background:var(--warning-gradient);color:var(--dark-color);border:none;padding:18px 40px;font-size:1.2rem;font-weight:700;border-radius:50px;transition:all .4s cubic-bezier(.4,0,.2,1);box-shadow:0 10px 30px rgba(255,193,7,.3);position:relative;overflow:hidden}
.btn-hero::before{content:'';position:absolute;inset:0;left:-100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);transition:left .5s}
.btn-hero:hover::before{left:100%}
.btn-hero:hover{transform:translateY(-5px) scale(1.05);box-shadow:0 20px 40px rgba(255,193,7,.4)}
/* ============= SECTIONS ============= */
.section{padding:100px 0;position:relative}
.section-title{text-align:center;margin-bottom:80px;position:relative}
.section-title h2{font-size:3rem;font-weight:800;background:var(--primary-gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:20px;position:relative}
.section-title h2::after{content:'';position:absolute;bottom:-15px;left:50%;transform:translateX(-50%);width:100px;height:4px;background:var(--primary-gradient);border-radius:2px}
.section-title p{font-size:1.2rem;color:var(--secondary-color);max-width:700px;margin:0 auto;line-height:1.8}
/* ============= CARDS COMMON ============= */
.glow-card{background:rgba(255,255,255,.1);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.2);border-radius:20px;transition:all .4s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}
.glow-card::before{content:'';position:absolute;inset:0;left:-100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);transition:left .8s}
.glow-card:hover::before{left:100%}
.glow-card:hover{transform:translateY(-10px) scale(1.02);box-shadow:0 25px 60px rgba(0,0,0,.3);border-color:rgba(255,255,255,.4)}
/* ============= STATS ============= */
.stats{background:var(--dark-color);color:#fff;position:relative;overflow:hidden}
.stats::before{content:'';position:absolute;inset:0;background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><polygon fill="rgba(255,255,255,0.02)" points="0,0 100,30 100,100 0,70"/></svg>')}
.stat-item{text-align:center;padding:50px 20px;position:relative;z-index:1}
.stat-item::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:100px;height:5px;background:var(--warning-gradient);border-radius:3px}
.stat-number{font-size:4rem;font-weight:800;background:var(--warning-gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;display:block;margin-bottom:15px}
.stat-label{font-size:1.2rem;font-weight:600;text-transform:uppercase;letter-spacing:1px}
/* ============= NEWSLETTER ============= */
.newsletter{background:var(--primary-gradient);color:#fff;position:relative;overflow:hidden}
.newsletter::before{content:'';position:absolute;inset:0;background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="80" cy="80" r="1" fill="rgba(255,255,255,0.1)"/></svg>')}
.newsletter-form{max-width:600px;margin:0 auto;position:relative;z-index:1}
.newsletter-input{border:none;border-radius:50px;padding:20px 30px;margin-bottom:25px;width:100%;font-size:1.1rem;box-shadow:0 10px 30px rgba(0,0,0,.1);transition:all .3s}
.newsletter-input:focus{outline:none;box-shadow:0 15px 40px rgba(0,0,0,.2);transform:translateY(-2px)}
.newsletter-btn{background:var(--warning-gradient);color:var(--dark-color);border:none;border-radius:50px;padding:20px 40px;font-weight:700;font-size:1.1rem;width:100%;transition:all .4s cubic-bezier(.4,0,.2,1);box-shadow:0 10px 30px rgba(255,193,7,.3)}
.newsletter-btn:hover{transform:translateY(-5px) scale(1.02);box-shadow:0 20px 40px rgba(255,193,7,.4)}
/* ============= FOOTER ============= */
.footer{background:var(--dark-color);color:#fff;padding:80px 0 40px;position:relative;overflow:hidden}
.footer::before{content:'';position:absolute;top:0;left:0;width:100%;height:5px;background:var(--primary-gradient)}
.footer h5{background:var(--warning-gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:25px;font-weight:700;font-size:1.3rem}
.footer ul{list-style:none;padding:0}
.footer ul li{margin-bottom:12px}
.footer ul li a{color:#adb5bd;text-decoration:none;transition:all .3s;display:inline-flex;align-items:center;gap:8px}
.footer ul li a:hover{color:#fff;transform:translateX(5px)}
.social-links a{display:inline-block;width:50px;height:50px;background:var(--primary-gradient);color:#fff;text-align:center;line-height:50px;border-radius:50%;margin-right:15px;font-size:1.2rem;transition:all .4s cubic-bezier(.4,0,.2,1);box-shadow:0 5px 20px rgba(102,126,234,.3)}
.social-links a:hover{background:var(--warning-gradient);color:var(--dark-color);transform:translateY(-5px) scale(1.1);box-shadow:0 10px 30px rgba(255,193,7,.4)}
/* ============= FLOATING / BACK TO TOP / NOTIFY ============= */
.floating-buttons{position:fixed;right:30px;bottom:30px;z-index:1000}
.floating-btn{display:block;width:70px;height:70px;border-radius:50%;text-align:center;line-height:70px;font-size:1.6rem;margin-bottom:20px;box-shadow:0 8px 30px rgba(0,0,0,.2);transition:all .4s cubic-bezier(.4,0,.2,1);text-decoration:none;position:relative;overflow:hidden}
.floating-btn::before{content:'';position:absolute;inset:0;left:-100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transition:left .6s}
.floating-btn:hover::before{left:100%}
.floating-btn:hover{transform:translateY(-5px) scale(1.15);box-shadow:0 15px 40px rgba(0,0,0,.3);color:#fff}
.floating-btn.phone{background:var(--success-gradient);color:#fff}
.floating-btn.line{background:linear-gradient(135deg,#00B900 0%,#00f2fe 100%);color:#fff}
.floating-btn.facebook{background:linear-gradient(135deg,#1877F2 0%,#42a5f5 100%);color:#fff}
.back-to-top{position:fixed;bottom:150px;right:30px;width:50px;height:50px;background:var(--primary-gradient);color:#fff;border:none;border-radius:50%;font-size:1.2rem;cursor:pointer;opacity:0;visibility:hidden;transition:all .4s cubic-bezier(.4,0,.2,1);z-index:999;box-shadow:0 8px 25px rgba(102,126,234,.3)}
.back-to-top.show{opacity:1;visibility:visible;transform:translateY(0)}
.back-to-top:hover{transform:translateY(-5px) scale(1.1);box-shadow:0 15px 35px rgba(102,126,234,.4)}
.notification{position:fixed;top:30px;right:30px;background:#fff;color:var(--dark-color);padding:25px 30px;border-radius:15px;box-shadow:var(--shadow-xl);z-index:1001;display:none;max-width:350px;border-left:5px solid var(--primary-color)}
.notification.show{display:block;animation:slideInRight .6s cubic-bezier(.4,0,.2,1)}
.notification.success{border-left-color:#28a745}.notification.error{border-left-color:#dc3545}
@keyframes slideInRight{from{opacity:0;transform:translateX(100%) scale(.8)}to{opacity:1;transform:translateX(0) scale(1)}}
/* ============= SERVICE PAGE (from v1) ============= */
.service-card{background:#fff;border-radius:20px;padding:40px;text-align:center;box-shadow:var(--shadow-lg);transition:all .4s cubic-bezier(.4,0,.2,1);margin-bottom:30px;border:1px solid rgba(0,0,0,.05)}
.service-card:hover{transform:translateY(-10px);box-shadow:var(--shadow-xl)}
.service-icon{width:80px;height:80px;background:var(--primary-gradient);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 25px;font-size:2rem;color:#fff}
/* ============= PAGE HEADER (shared) ============= */
.page-header{background:var(--primary-gradient);color:#fff;padding:150px 0 100px;text-align:center;position:relative}
.page-header::before{content:'';position:absolute;inset:0;background:rgba(0,0,0,.2)}
.page-header .container{position:relative;z-index:2}
.page-header h1{font-size:3.5rem;font-weight:800;margin-bottom:20px}
.page-header p{font-size:1.3rem;opacity:.9;max-width:720px;margin:0 auto}
.breadcrumb{background:transparent;margin-bottom:15px;padding:0}
.breadcrumb-item a{color:rgba(255,255,255,.85);text-decoration:none}
.breadcrumb-item.active{color:#fff}
/* ============= ABOUT PAGE SPECIFIC ============= */
.about-intro{background:#fff;border-radius:20px;box-shadow:var(--shadow-lg)}
.feature-list{list-style:none;margin:0;padding:0}
.feature-list li{display:flex;align-items:center;gap:10px;padding:10px 0;color:var(--secondary-color)}
.feature-list i{color:#43e97b}
.kpi-card{background:#fff;border-radius:18px;box-shadow:var(--shadow-lg);padding:28px;text-align:center}
.kpi-number{font-weight:800;font-size:2rem;background:var(--warning-gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.kpi-label{color:var(--secondary-color);margin-top:6px}
.value-card{background:#fff;border-radius:18px;box-shadow:var(--shadow-lg);padding:24px;text-align:center;transition:all .3s}
.value-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-xl)}
.value-icon{width:64px;height:64px;margin:0 auto 14px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--success-gradient);color:#fff;font-size:1.4rem}
.team-card{background:#fff;border-radius:18px;box-shadow:var(--shadow-lg);padding:24px;text-align:center;transition:all .3s}
.team-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-xl)}
.team-avatar{width:84px;height:84px;margin:0 auto 14px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--primary-gradient);color:#fff;font-size:1.6rem}
.team-card .role{color:var(--secondary-color);margin:0}
.timeline{position:relative;margin:0 auto;max-width:720px}
.timeline::before{content:'';position:absolute;left:calc(50% - 2px);top:0;bottom:0;width:4px;background:linear-gradient(#e9ecef,#ced4da)}
.timeline-item{position:relative;display:flex;gap:16px;align-items:flex-start;margin:26px 0}
.timeline-item:nth-child(odd){flex-direction:row-reverse;text-align:right}
.timeline-item .dot{width:14px;height:14px;border-radius:50%;background:var(--primary-color);box-shadow:0 0 0 6px rgba(102,126,234,.15)}
.timeline-item:nth-child(odd) .dot{order:2}
/* ============= CONTACT PAGE SPECIFIC ============= */
.contact-card{background:#fff;border-radius:20px;box-shadow:var(--shadow-lg);padding:24px}
.contact-info{display:flex;flex-direction:column;gap:12px}
.contact-info-item{display:flex;gap:12px;align-items:flex-start;padding:10px;border-radius:12px;background:#f8f9fa}
.contact-info-item .icon{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--primary-gradient);color:#fff}
.contact-cta .btn{font-weight:700}
.form-control{border-radius:12px;border:1px solid #e9ecef;padding:12px 14px}
.form-control:focus{border-color:#c7cffc;box-shadow:0 0 0 .2rem rgba(102,126,234,.15)}
.form-check-input{border-radius:6px;border:1px solid #e9ecef}
.map-embed{border-radius:16px;overflow:hidden;box-shadow:var(--shadow-lg);background:#fff;margin-top:10px}
.map-embed iframe{width:100%;height:380px;border:0}
/* ============= RESPONSIVE ============= */
@media (max-width:768px){
  .hero h1{font-size:2.8rem}
  .section-title h2{font-size:2.2rem}
  .floating-buttons{right:20px;bottom:20px}
  .floating-btn{width:60px;height:60px;line-height:60px;font-size:1.3rem}
  .back-to-top{bottom:120px;right:20px;width:45px;height:45px;font-size:1rem}
  .stat-number{font-size:3rem}
  .page-header{padding:120px 0 80px}
  .page-header h1{font-size:2.6rem}
}
@media (max-width:576px){
  .hero h1{font-size:2.2rem}
  .section{padding:60px 0}
  .service-card{padding:30px}
  .timeline::before{left:8px}
  .timeline-item{margin-left:24px}
  .timeline-item,.timeline-item:nth-child(odd){flex-direction:row;text-align:left}
}