/* ============================================
   PAN ENGINEERS — GLOBAL CSS
   Sky Blue & White Premium Theme 2026
============================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Barlow+Condensed:wght@600;700;800;900&display=swap');

/* ---- CSS Variables ---- */
:root {
    /* Sky Blue + White Brand Colors */
    --pe-white:         #ffffff;
    --pe-light-bg:      #f0f9ff;
    --pe-light-bg-2:    #e0f2fe;
    --pe-light-bg-3:    #bae6fd;

    --pe-sky:           #0ea5e9;
    --pe-sky-light:     #38bdf8;
    --pe-sky-lighter:   #7dd3fc;
    --pe-sky-dark:      #0284c7;
    --pe-sky-darker:    #0369a1;

    /* Legacy theme aliases — keep older component styles on-brand. */
    --pe-orange:        var(--pe-sky);
    --pe-orange-dark:   var(--pe-sky-dark);
    --pe-gold:          var(--pe-sky-light);
    --pe-gray-400:      var(--pe-text-lighter);

    --pe-navy:          #0c4a6e;
    --pe-navy-dark:     #073952;
    --pe-navy-darker:   #042a3d;

    --pe-text-dark:     #0f172a;
    --pe-text-mid:      #334155;
    --pe-text-light:    #64748b;
    --pe-text-lighter:  #94a3b8;

    --pe-border:        #e2e8f0;
    --pe-border-blue:   rgba(14, 165, 233, 0.25);

    /* Typography */
    --font-primary:     'Inter', sans-serif;
    --font-display:     'Barlow Condensed', sans-serif;

    /* Spacing */
    --section-py:       100px;
    --container-max:    1440px;

    /* Transitions */
    --ease-smooth:      cubic-bezier(0.4, 0, 0.2, 1);
    --ease-bounce:      cubic-bezier(0.34, 1.56, 0.64, 1);
    --transition:       0.35s var(--ease-smooth);
}

/* ---- Reset & Base ---- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-primary);
    background: var(--pe-white);
    color: var(--pe-text-dark);
    line-height: 1.6;
    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

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

ul { list-style: none; }

button {
    border: none;
    background: none;
    cursor: pointer;
    font-family: inherit;
}

/* ---- Container ---- */
.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 clamp(20px, 3vw, 48px);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

/* ---- Section Shared ---- */
.section-header {
    text-align: center;
    margin-bottom: 64px;
}

.section-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--pe-sky-dark);
    margin-bottom: 16px;
    padding: 6px 16px;
    border: 1px solid rgba(14, 165, 233, 0.3);
    border-radius: 100px;
    background: rgba(14, 165, 233, 0.08);
}

.section-title {
    font-family: var(--font-display);
    font-size: clamp(36px, 5vw, 60px);
    font-weight: 800;
    line-height: 1.1;
    color: var(--pe-navy);
    margin-bottom: 20px;
}

.section-title .highlight {
    color: var(--pe-sky);
    position: relative;
}

.section-desc {
    font-size: 18px;
    color: var(--pe-text-light);
    max-width: 640px;
    margin: 0 auto;
    line-height: 1.7;
}

/* ---- Scrollbar ---- */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--pe-light-bg); }
::-webkit-scrollbar-thumb { background: var(--pe-sky); border-radius: 3px; }

/* ---- Selection ---- */
::selection {
    background: rgba(14, 165, 233, 0.25);
    color: var(--pe-navy);
}

/* ---- Animations ---- */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(40px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInLeft {
    from { opacity: 0; transform: translateX(-40px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.9); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 12px rgba(14,165,233,0.4); }
    50%       { box-shadow: 0 0 28px rgba(14,165,233,0.8); }
}
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-12px); }
}
@keyframes shimmer {
    0%   { background-position: -200% center; }
    100% { background-position: 200% center; }
}