* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary-color: #00d4ff;
    --secondary-color: #ff006e;
    --dark-bg: #0a0e27;
    --card-bg: #1a1f3a;
    --text-light: #e0e0e0;
    --text-muted: #a0a0a0;
    --accent: #00d4ff;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--dark-bg);
    color: var(--text-light);
    overflow-x: hidden;
    position: relative;
}

/* Use Rubik if available */
body { font-family: 'Rubik', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }

/* Animated Background */
.animated-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #0a0e27 0%, #1a1f3a 50%, #0f1729 100%);
    z-index: -1;
    overflow: hidden;
}

.blob {
    position: absolute;
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    filter: blur(40px);
    opacity: 0.3;
    animation: float 6s ease-in-out infinite;
}

.blob-1 {
    width: 400px;
    height: 400px;
    background: linear-gradient(45deg, #00d4ff, #0099cc);
    top: -100px;
    left: -100px;
    animation-delay: 0s;
}

.blob-2 {
    width: 300px;
    height: 300px;
    background: linear-gradient(45deg, #ff006e, #ff4d9f);
    bottom: 100px;
    right: 50px;
    animation-delay: 2s;
}

.blob-3 {
    width: 350px;
    height: 350px;
    background: linear-gradient(45deg, #00d4ff, #ff006e);
    bottom: -150px;
    left: 50%;
    animation-delay: 4s;
}

@keyframes float {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    33% {
        transform: translate(30px, -50px) rotate(120deg);
    }
    66% {
        transform: translate(-30px, 50px) rotate(240deg);
    }
}
.body-canvas {
    position: relative;

}
/* Header */
/* top hero header (white area) */
.top-hero {
    background: #ffffff;
    padding: 0px;
    position: relative;
    overflow: visible;
}

.top-hero-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    position: relative;
    z-index: 3;
}

.logo-center { text-align: center; margin-bottom: 18px; }
.fiab-logo { width: 220px; height: auto; }

/* Hero Section */
/* Hero row inside white header */
.hero-row { display:flex;height: 80vh;  align-items:center; }
.hero-left { flex:1; padding-right:12px;  }
.wave-lines path { animation: waveFlow 10s linear infinite; }.wave-lines path { animation: waveFlow 10s linear infinite; }.wave-lines path { animation: waveFlow 10s linear infinite; }.wave-lines path { animation: waveFlow 10s linear infinite; }.wave-lines path { animation: waveFlow 10s linear infinite; }
.hero-right { flex:0 0 420px; padding-bottom:260px ; display:flex; justify-content:center; }
.product-media { width:420px; max-width:100%; position:relative; transform: translateY(-48px); z-index:3; }
.product-media .product-image { width:100%; display:block; border-radius:8px; transform: translateY(-10px); position:absolute; left:0; top:-100px; transition: opacity 380ms cubic-bezier(.2,.9,.2,1), transform 380ms cubic-bezier(.2,.9,.2,1); }
.product-image--default { opacity:1; z-index:1; }
.product-image--hover { opacity:0; z-index:2; pointer-events:none; }
.hero-right:hover .product-image--hover { opacity:1; }
.hero-right:hover .product-image--default { opacity:0; }
.eyebrow { font-size:38px; font-weight:700; color: #0b66b3; margin-bottom:6px; }
.eyebrow-accent { color:#F4AD3B; display:inline-block; margin-right:10px; }
.main-title { font-size:44px; color:#0b66b3; line-height:1.02; margin-bottom:8px; font-weight:800; }
.sub { color:#F4AD3B; font-weight:600; margin-bottom:16px; }
.lead { color:#333; max-width:560px; font-size:15px; line-height:1.6; }

/* Wave styles removed */

/* Hero canvas (Perlin waves) — attached directly to .top-hero */
#hero-canvas {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
    z-index: 0;
}

/* Ensure hero content sits above the hero canvas */
.top-hero-inner { position: relative; z-index: 2; }

/*
 * BENEFITS SECTION DOCUMENTATION
 * 
 * ISSUE: Entire benefits section moves on image hover, causing unwanted layout shift
 * 
 * ROOT CAUSES:
 * 1. .benefits-title has transform: translateX(-60px) on default state
 *    - On .benefits:hover, it animates to translateX(0)
 *    - This shifts the entire title left by 60px when hovering anywhere in .benefits
 * 
 * 2. Image height animation on .benefit-card:hover img
 *    - Height transitions from 220px to 140px (80px reduction)
 *    - This causes card content to reflow and parent container to shift
 *    - Multiple conflicting transition durations (2600ms and 3600ms) compound the issue
 * 
 * SOLUTION RECOMMENDATIONS:
 * - Remove transform: translateX(-60px) from initial .benefits-title state
 *   OR scope hover to .benefit-card instead of .benefits parent
 * - Use max-height or aspect-ratio instead of height animation to prevent layout shift
 * - Ensure card height is fixed or use flex-grow to prevent reflow
 * - Align transition durations (currently 300ms, 500ms, 600ms, 1600ms, 2600ms, 3600ms)
 * - Consider using will-change: transform on animated elements for better performance
 * - Use overflow: hidden on .benefit-card to contain animation artifacts
 */
/* Cards Section */
/* Benefits dark band */
.benefits { background: #071229; color: #d9e8f6; padding: 48px 0 56px; }
.benefits-inner { max-width:1200px; margin:0 auto; padding:0 24px; position:relative; z-index:1; }
/* Benefits canvas for subtle background particles */

.benefits-title { font-size:30px; color:#fff; margin-bottom:18px; position:relative;  opacity:0; transition: transform 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 500ms ease; }
.benefits:hover .benefits-title { transform: translateX(0); opacity:1; }
.benefits-title::after { content:''; display:block; width:86px; height:6px; background:#F4AD3B; border-radius:4px; transform: scaleX(0); transform-origin: left; transition: transform 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.benefits:hover .benefits-title::after { transform: scaleX(1); }
.benefits-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:22px;  }
.benefit-card { background: rgba(4, 13, 26, 0.116); padding:12px; border-radius:6px; overflow: hidden; cursor: pointer; display: flex; flex-direction: column; }
.card-image-wrapper { position: relative; overflow: hidden; border-radius: 4px; flex-shrink: 0; }
.card-image-wrapper::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(180deg, rgba(98, 187, 255, 0.199) 100%, transparent 100%); pointer-events: none; z-index: 1; transition: opacity 360ms cubic-bezier(.22,.9,.26,1); opacity: 1; }
.benefit-card img { width:100%; height:220px; object-fit:cover; border-radius:4px; transition: height 360ms cubic-bezier(.22,.9,.26,1), transform 360ms cubic-bezier(.22,.9,.26,1); }
.benefit-card:hover .card-image-wrapper::before, .benefit-card:focus .card-image-wrapper::before { opacity: 0; }
.benefit-card:hover img, .benefit-card:focus img { height: 140px; }
.card-number { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 72px; font-weight: 800; color: #F4AD3B; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); pointer-events: none; }
.card-number { opacity: 1; transition: opacity 300ms ease; }
.benefit-card:hover .card-number, .benefit-card:focus .card-number { opacity: 0; }
/* Hide captions by default, reveal on hover (no sliding animation) */
.benefit-card h3, .benefit-card p { opacity: 0; visibility: hidden; margin-top: 8px; }
.benefit-card h3 { color:#F4AD3B; font-size:15px; text-align: center; margin:10px 0 6px; }
.benefit-card p { color:#bcd1e6; text-align: center; font-size:13px; line-height:1.4; }

.benefit-card:hover img, .benefit-card:focus img { filter: blur(0); height: 140px; transition: height 1000ms cubic-bezier(.22,.9,.26,1); }
.benefit-card:hover h3, .benefit-card:hover p { opacity:1; visibility: visible; }
.diagram {  background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)); padding: 0 20px; border-radius:6px; }
.diagram img { width:100%; border-radius:6px; display:block; }
.diagram-caption { color:#F4AD3B;  font-weight:600; }

/* Contact Section */
/* Contact large panel */
.contact-panel { background: #f7fafc; padding:56px 0; }
.contact-inner { max-width:1100px; margin:0 auto; padding:0 24px; }
.contact-inner { position:relative; z-index:2; }
.contact-inner h2 { color:#0b66b3; font-size:28px; margin-bottom:12px;  opacity: 0; transition: transform 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 500ms ease; position:relative; }
.contact-panel:hover .contact-inner h2 { transform: translateX(0); opacity:1; }
.contact-inner h2::after { content:''; display:block; width:86px; height:6px; background:#F4AD3B; border-radius:4px; transform: scaleX(0); transform-origin: left; transition: transform 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.contact-panel:hover .contact-inner h2::after { transform: scaleX(1); }
.contact-large { background:rgba(255,255,255,0.9); padding:22px; border-radius:8px; box-shadow:0 10px 30px rgba(10,20,40,0.06); }
.form-row { display:flex; gap:12px; margin-bottom:12px; }
.form-row input { flex:1; padding:14px; border:1px solid #e6e9ef; border-radius:4px; }
.contact-large textarea { width:100%; height:120px; padding:12px; border:1px solid #e6e9ef; border-radius:4px; resize:vertical; }
.book-btn { display:block; width:100%; background:#F4AD3B; color:#fff; border:none; padding:16px; font-weight:700; font-size:18px; border-radius:6px; margin-top:12px; cursor:pointer; }


/* Footer */
/* Footer */
.site-footer { background:#000; color:#bfc9d6; padding:36px 0 48px; }
.footer-inner { max-width:1200px; margin:0 auto; padding:0 24px; display:flex; flex-direction:column; gap:30px; }
.footer-logo { width:120px; height:auto; text-align: center; }
.footer-logo-image { width: 100%; max-width: 120px; height: auto; }
.footer-content { display:flex; gap:40px; align-items:flex-start; }
.footer-desc { color:#9aa6b8; font-size:14px; line-height:1.6; flex:1; }
.footer-contacts { display:flex; gap:24px; flex:1; }
.footer-col { flex: 1; }
.footer-col strong { color:#F4AD3B; display:block; margin-bottom:6px; }
.footer-col p { color:#9aa6b8; font-size:14px; }
.benefit-hybrid {
    margin-top: 80px;
    text-align: center;
}

.benefit-hybrid p {
    color: #bcd1e6;
    font-size: 14px;
    max-width: 900px;
    margin: 10px auto;
    line-height: 1.6;
}

.benefit-hybrid strong {
    color: #F4AD3B;
}

/* Responsive */
@media (max-width:1000px) {
    .benefits-grid { grid-template-columns: repeat(2, 1fr); }
    .hero-row { flex-direction:column-reverse; height: auto; align-items: flex-start; gap: 24px; }
    .hero-right { flex:0 0 420px; padding-bottom: 260px; width: 100%; display: flex; justify-content: center; }
    .product-media { width:100%; max-width:420px; transform: translateY(-48px); }
    .product-media .product-image { position:absolute; transform: translateY(-10px); margin-bottom:8px; top: -100px; left: 0; }
    .product-image--hover { display:none; }
    .main-title { font-size:32px; }
    .footer-content { flex-direction: column; gap: 20px; }
    .footer-contacts { flex-direction: column; gap: 16px; }
}
@media (max-width:640px) {
    .benefits-grid { grid-template-columns: 1fr; }
    .footer-inner { flex-direction:column; }
    .form-row { flex-direction:column; }
    .hero-row { flex-direction:column-reverse; height:auto; gap:306px;padding-top: 140px  }
    .hero-right { width:100%; flex: 0 0 auto; display:flex; justify-content:center; padding-bottom: 40px; }
    .hero-left { justify-content:center; padding-bottom: 140px; }
    .product-media { width:100%; max-width:300px; transform: translateY(-48px); margin: 0 auto; }
    .product-media .product-image { position:absolute; transform: translateY(-10px); margin-bottom:8px; top: -100px; left: 0; }
    .product-image--hover { display:none; }
    .main-title { font-size:28px; }
    .eyebrow { font-size:28px; }
    .footer-logo { margin: 0 auto; }
    .footer-content { flex-direction: column; gap: 16px;justify-content: center;align-items: center; }
    .footer-desc { text-align: center; }
    .footer-contacts { flex-direction: column; gap: 12px; }
    .footer-col { text-align: center; }
    .footer-col p { font-size: 13px; }
}