/* src/styles.css */

:root {
    --hts-navy: #0A2540;
    --hts-cyan: #00B4D8;
    --hts-green: #06D6A0;
    --hts-light: #E8F4FD;
    --hts-gray: #64748B;
}

body {
    background-color: #ffffff;
    color: var(--hts-navy);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

.bg-hts-navy  { background-color: var(--hts-navy); }
.bg-hts-cyan  { background-color: var(--hts-cyan); }
.bg-hts-light { background-color: var(--hts-light); }
.text-hts-navy  { color: var(--hts-navy); }
.text-hts-cyan  { color: var(--hts-cyan); }
.text-hts-green { color: var(--hts-green); }
.border-hts-cyan  { border-color: var(--hts-cyan); }
.border-hts-green { border-color: var(--hts-green); }

.hero-gradient {
    background: linear-gradient(135deg, var(--hts-navy) 0%, #0D3B66 60%, #0A4A7A 100%);
}

.btn-primary {
    background-color: var(--hts-cyan);
    color: var(--hts-navy);
    transition: all 0.3s ease;
}
.btn-primary:hover {
    filter: brightness(1.15);
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0, 180, 216, 0.4);
}

.btn-secondary {
    background-color: transparent;
    color: white;
    border: 2px solid var(--hts-cyan);
    transition: all 0.3s ease;
}
.btn-secondary:hover {
    background-color: rgba(0, 180, 216, 0.15);
}

.btn-secondary-dark {
    background-color: transparent;
    color: var(--hts-navy);
    border: 2px solid var(--hts-navy);
    transition: all 0.3s ease;
}
.btn-secondary-dark:hover {
    background-color: var(--hts-navy);
    color: white;
}

.service-card {
    background: white;
    border: 1px solid #E2E8F0;
    transition: all 0.3s ease;
}
.service-card:hover {
    border-color: var(--hts-cyan);
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0, 180, 216, 0.1);
}

.terminal-badge {
    font-family: 'Fira Code', 'Courier New', monospace;
    background: rgba(0, 180, 216, 0.1);
    border: 1px solid rgba(0, 180, 216, 0.3);
    color: var(--hts-cyan);
}

/* --- Logo marquee --- */
.logo-strip-wrap {
    position: relative;
    overflow: hidden;
}
.logo-strip-wrap::before,
.logo-strip-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    height: 100%;
    width: 10%;
    z-index: 10;
    pointer-events: none;
}
.logo-strip-wrap::before {
    left: 0;
    background: linear-gradient(to right, #ffffff, transparent);
}
.logo-strip-wrap::after {
    right: 0;
    background: linear-gradient(to left, #ffffff, transparent);
}
.logo-strip-track {
    display: flex;
    width: max-content;
    align-items: center;
    animation: scrollLeft var(--scroll-speed, 48s) linear infinite;
}
.logo-strip-content {
    display: flex;
    align-items: center;
    gap: 5rem;
    padding: 0 2.5rem;
}
@keyframes scrollLeft {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}