/* =========================================================
   E-Tek Technology Industry Limited
   Shared Stylesheet
   ========================================================= */

:root {
    /* E-TEK brand palette: navy + violet + cool neutrals */
    --primary: #09275F;
    --primary-dark: #071B42;
    --primary-hover: #123A7A;
    --secondary: #8B28E8;
    --secondary-hover: #7420C7;
    --light: #F3F5F8;
    --border: #DCE3ED;
    --text: #253247;
    --muted: #64748B;
    --accent-soft: #F3E8FF;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    color: var(--text);
    background: #ffffff;
}

/* Header */
.site-header {
    transition:
        background-color 0.25s ease,
        box-shadow 0.25s ease,
        color 0.25s ease;
}

.site-header.scrolled {
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 4px 18px rgba(9, 39, 95, 0.10);
    backdrop-filter: blur(8px);
}

.hero-overlay {
    background:
        linear-gradient(
            90deg,
            rgba(7, 27, 66, 0.88) 0%,
            rgba(9, 39, 95, 0.66) 52%,
            rgba(9, 39, 95, 0.20) 100%
        );
}

/* Product cards */
.product-card {
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 38px rgba(9, 39, 95, 0.12);
    border-color: rgba(139, 40, 232, 0.38);
}

/* Buttons */
.btn-primary {
    background: var(--primary);
    color: #fff;
    transition:
        background-color 0.2s ease,
        transform 0.2s ease;
}

.btn-primary:hover {
    background: var(--primary-hover);
    transform: translateY(-1px);
}

.btn-secondary {
    background: var(--secondary);
    color: #fff;
    transition:
        background-color 0.2s ease,
        transform 0.2s ease;
}

.btn-secondary:hover {
    background: var(--secondary-hover);
    transform: translateY(-1px);
}

/* Section helpers */
.section-label {
    color: var(--secondary);
    letter-spacing: 0.12em;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
}

.section-title {
    color: var(--primary);
}

/* Page hero */
.page-hero {
    background:
        linear-gradient(
            90deg,
            rgba(9, 39, 95, 0.97),
            rgba(9, 39, 95, 0.84)
        );
}

/* Certification trust bar */
.trust-logo {
    filter: grayscale(100%);
    opacity: 0.75;
    transition: all 0.2s ease;
}

.trust-logo:hover {
    filter: grayscale(0%);
    opacity: 1;
}

/* FAQ */
.faq-item summary {
    cursor: pointer;
    list-style: none;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary::after {
    content: "+";
    float: right;
    color: var(--secondary);
    font-size: 1.25rem;
    font-weight: 700;
}

.faq-item[open] summary::after {
    content: "−";
}

/* WhatsApp floating button */
.whatsapp-float {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 70;
    width: 56px;
    height: 56px;
    border-radius: 9999px;
    background: #25d366;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.18);
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.whatsapp-float:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(37, 211, 102, 0.28);
}

/* Modal */
.modal-backdrop {
    background: rgba(8, 25, 44, 0.65);
    backdrop-filter: blur(3px);
}

/* Form */
.form-input {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    padding: 0.75rem 0.875rem;
    outline: none;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.form-input:focus {
    border-color: var(--secondary);
    box-shadow: 0 0 0 3px rgba(139, 40, 232, 0.14);
}

/* Mobile navigation */
.mobile-menu {
    display: none;
}

.mobile-menu.active {
    display: block;
}

/* Utility */
.text-primary {
    color: var(--primary);
}

.text-secondary {
    color: var(--secondary);
}

.bg-primary {
    background-color: var(--primary);
}

.bg-secondary {
    background-color: var(--secondary);
}

.border-soft {
    border-color: var(--border);
}

/* Brand polish */
::selection { background: #E9D5FF; color: #071B42; }
a { text-underline-offset: 3px; }
.form-input:focus { border-color: var(--secondary); }