/* =======================================
   THEME COLORS – Tech / AI Style
======================================= */
:root {
    --primary-dark: #0A0F24;
    --primary: #102040;
    --card-bg: #161B2E;

    --accent: #00E5FF;        /* Cyan Glow */
    --accent-2: #3D8BFF;      /* Electric Blue */

    --text-light: #EAEAEA;
}

/* ---------------------------------------
   GLOBAL
---------------------------------------- */
body {
    font-family: 'Sarabun', sans-serif;
    background: var(--primary-dark);
    color: var(--text-light);
}

/* Heading use Kanit */
h1, h2, h3, h4, h5 {
    font-family: 'Kanit', sans-serif;
    color: var(--accent);
}

/* ---------------------------------------
   NAVBAR
---------------------------------------- */
.navbar {
    background: var(--primary) !important;
}
.nav-link, .navbar-brand {
    color: var(--accent) !important;
}
.nav-link:hover {
    color: var(--accent-2) !important;
}

/* ---------------------------------------
   HERO
---------------------------------------- */
.hero {
    min-height: 90vh;
    background: url('../images/hero-bg.jpg') center/cover no-repeat;
    position: relative;
}
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(10, 15, 36, 0.75);
}
.hero > .container {
    position: relative;
    z-index: 10;
}

/* ---------------------------------------
   BUTTON – Neon Gradient
---------------------------------------- */
.btn-gradient {
    background: linear-gradient(to right, var(--accent), var(--accent-2));
    color: #000;
    border-radius: 8px;
    transition: 0.3s;
    box-shadow: 0 0 14px rgba(0,229,255,0.5);
}
.btn-gradient:hover {
    transform: translateY(-4px);
    box-shadow: 0 0 25px rgba(0,229,255,0.8);
}

/* ---------------------------------------
   ANIMATIONS
---------------------------------------- */
.fade-in { animation: fadeIn 1.6s ease forwards; opacity: 0; }
.slide-up { animation: slideUp 1.2s ease forwards; opacity: 0; }
.slide-up-delay { animation: slideUp 1.6s ease forwards; opacity: 0; }
.fade-up { animation: fadeUp 1.4s ease forwards; opacity: 0; }

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes slideUp {
  from { transform: translateY(25px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
@keyframes fadeUp {
  from { transform: translateY(50px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* ---------------------------------------
   SERVICE CARDS
---------------------------------------- */
.service-card {
    background: var(--card-bg);
    border: 1px solid #202A45;
    color: var(--text-light);
    transition: 0.3s;
}
.service-card:hover {
    transform: translateY(-10px);
    border-color: var(--accent);
    box-shadow: 0 0 25px rgba(0,229,255,0.5);
}
.service-card h4 {
    color: var(--accent-2);
}
.service-card p {
    color: #d7d7d7;
}

/* ICON Glow */
.icon-glow {
    color: var(--accent);
    text-shadow: 0 0 10px rgba(0,229,255,0.9);
}

/* ---------------------------------------
   FOOTER
---------------------------------------- */
.footer {
    background: var(--primary);
    color: var(--accent);
}