/* ========== CUSTOM STYLES ========== */

/* Lock iOS/Safari overscroll bounce */
html, body {
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: grab;
}
html.grabbing, html.grabbing * {
    cursor: grabbing !important;
}
input, textarea, select {
    -webkit-user-select: text;
    -ms-user-select: text;
    user-select: text;
    cursor: text;
}
html {
    overflow-x: hidden;
}

/* Glassmorphism utilities */
.glass-dark {
    position: relative;
    isolation: isolate;
}
.glass-dark::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: -1;
    opacity: 0;
    transition: opacity 4s ease-out;
}
.glass-dark.blur-active::before {
    opacity: 1;
}
.glass-light {
    position: relative;
    isolation: isolate;
}
.glass-light::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: rgba(255, 255, 255, 0.80);
    border: 1px solid rgba(255, 255, 255, 0.60);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 8px 32px rgba(19, 28, 60, 0.08);
    z-index: -1;
    opacity: 0;
    transition: opacity 4s ease-out;
}
.glass-light.blur-active::before {
    opacity: 1;
}

/* Header scroll state */
.header-scrolled {
    background: rgba(19, 28, 60, 0.95) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
}

/* Scroll reveal animations */
.reveal {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* Chat message animation */
.chat-msg {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.chat-msg.visible {
    opacity: 1;
    transform: translateY(0);
}

/* WhatsApp pulse */
@keyframes wa-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5); }
    50% { box-shadow: 0 0 0 14px rgba(37, 211, 102, 0); }
}
.wa-pulse {
    animation: wa-pulse 3s ease-in-out infinite;
}

/* Floating particles */
@keyframes float-slow {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(3deg); }
}
@keyframes float-medium {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-14px) rotate(-2deg); }
}
.float-slow { animation: float-slow 8s ease-in-out infinite; }
.float-medium { animation: float-medium 6s ease-in-out infinite; }

/* Gradient text */
.gradient-text {
    background: linear-gradient(135deg, #FFFFFF 0%, #A5A5A5 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Hero visual grid */
.hero-grid {
    background-image:
        linear-gradient(rgba(38, 70, 166, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(38, 70, 166, 0.08) 1px, transparent 1px);
    background-size: 40px 40px;
}

/* Subtle grid for dark sections */
.section-grid {
    background-image:
        linear-gradient(rgba(38, 70, 166, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(38, 70, 166, 0.04) 1px, transparent 1px);
    background-size: 60px 60px;
}

/* Glassmorphism — green variant */
.glass-green {
    position: relative;
    isolation: isolate;
}
.glass-green::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.3);
    z-index: -1;
    opacity: 0;
    transition: opacity 4s ease-out;
}
.glass-green.blur-active::before {
    opacity: 1;
}

/* Green section grid */
.green-grid {
    background-image:
        linear-gradient(rgba(38, 166, 41, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(38, 166, 41, 0.05) 1px, transparent 1px);
    background-size: 50px 50px;
}

/* Smooth scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #131C3C; }
::-webkit-scrollbar-thumb { background: #2646A6; border-radius: 4px; }

/* Typing indicator dots */
@keyframes typing-bounce {
    0%, 60%, 100% { transform: translateY(0); }
    30% { transform: translateY(-4px); }
}
.typing-dot {
    animation: typing-bounce 1.4s ease-in-out infinite;
}
.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }

/* Project card hover */
.project-card {
    transition: box-shadow 0.3s ease;
}
.project-card:hover {
    box-shadow: 0 20px 60px rgba(19, 28, 60, 0.15);
}

/* Benefit card hover */
.benefit-card {
    transition: background 0.3s ease;
}
.benefit-card:hover {
    background: rgba(255, 255, 255, 0.10);
}

/* ===== Shared Accordion ===== */
.accordion__panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.accordion-item.is-open .accordion__chevron {
    transform: rotate(180deg);
}

.accordion__trigger {
    background: none;
    border: none;
    outline: none;
    font: inherit;
    color: inherit;
}
.accordion__trigger:focus-visible {
    outline: 2px solid #3F5ACA;
    outline-offset: -2px;
    border-radius: 1rem;
}

.accordion__content p {
    color: rgba(255, 255, 255, 0.60);
    line-height: 1.75;
    margin-bottom: 1rem;
}
.accordion__content p:last-child {
    margin-bottom: 0;
}
.accordion__content strong {
    color: rgba(255, 255, 255, 0.85);
    font-weight: 600;
}

.accordion-item.is-open .accordion__content {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 1.5rem;
}

.accordion-item.is-open {
    background: rgba(255, 255, 255, 0.06) !important;
}

/* Green variant — focus ring */
.accordion__trigger.accordion--green:focus-visible {
    outline-color: #34D399;
}

/* Form input focus */
.form-input {
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-input:focus {
    border-color: #26A629;
    box-shadow: 0 0 0 3px rgba(38, 166, 41, 0.2);
    outline: none;
}

/* Shield glow for data sovereignty */
@keyframes shield-glow {
    0%, 100% { filter: drop-shadow(0 0 8px rgba(38, 70, 166, 0.3)); }
    50% { filter: drop-shadow(0 0 20px rgba(38, 70, 166, 0.6)); }
}
.shield-glow {
    animation: shield-glow 4s ease-in-out infinite;
}

/* Call center active pulse */
@keyframes callcenter-pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.6); }
    50% { opacity: 0.7; box-shadow: 0 0 0 4px rgba(52, 211, 153, 0); }
}
.callcenter-pulse {
    animation: callcenter-pulse 2s ease-in-out infinite;
}

/* Icon service pulse — gentle glow */
@keyframes icon-service-pulse {
    0%, 100% { border-color: rgba(52, 211, 153, 0.2); background-color: rgba(52, 211, 153, 0.10); }
    50% { border-color: rgba(52, 211, 153, 0.45); background-color: rgba(52, 211, 153, 0.20); }
}
.icon-service-pulse {
    animation: icon-service-pulse 3s ease-in-out infinite;
}

/* Call button active pulse */
@keyframes call-btn-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
    50% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
}
.call-btn-pulse {
    animation: call-btn-pulse 2s ease-in-out infinite;
}

/* Data flow lines */
@keyframes data-flow {
    0% { stroke-dashoffset: 100; }
    100% { stroke-dashoffset: 0; }
}
.data-flow-line {
    stroke-dasharray: 8 12;
    animation: data-flow 3s linear infinite;
}

/* Closing CTA — badge pulse */
@keyframes closing-pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(38, 166, 41, 0.6); }
    50% { opacity: 0.7; box-shadow: 0 0 0 6px rgba(38, 166, 41, 0); }
}
.closing-dot {
    animation: closing-pulse 2s ease-in-out infinite;
}

/* Closing CTA — italic gradient word */
.closing-italic {
    font-style: italic;
    background: linear-gradient(135deg, #FFFFFF 0%, #8FA2E0 50%, #3F5ACA 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Closing CTA — canvas container */
#closing-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Hero — Three.js 3D grid canvas */
#hero-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Demo — Three.js circuit canvas */
#demo-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}