/* ============================================
   RK TRANS - Design System & Base Styles
   Corporate Modern | Mobile-First
   ============================================ */

:root {
    /* Brand Colors - From Logo */
    --color-primary: #001647;
    /* Dark Navy (from logo) */
    --color-primary-dark: #000a24;
    /* Darker variation */
    --color-primary-light: #002461;
    /* Lighter variation    
    /* Brand Accent - Bright Blue from Logo */
    --color-accent: #0e76b3;
    /* Bright Blue (from logo) */
    --color-accent-hover: #0a5a8a;
    /* Darker on hover */
    --color-accent-light: #1a8fd4;
    /* Lighter variation */

    /* Neutral Palette */
    --color-white: #ffffff;
    --color-bg: #f8fafc;
    --color-bg-alt: #f1f5f9;
    --color-text: #1e293b;
    --color-text-muted: #64748b;
    --color-border: #e2e8f0;

    /* Success/Safety */
    --color-success: #10b981;
    --color-success-light: #d1fae5;

    /* Typography */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-heading: 'Outfit', var(--font-primary);

    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;

    /* Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(10, 37, 64, 0.05);
    --shadow-md: 0 4px 12px rgba(10, 37, 64, 0.08);
    --shadow-lg: 0 8px 24px rgba(10, 37, 64, 0.12);
    --shadow-xl: 0 16px 48px rgba(10, 37, 64, 0.16);

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 400ms ease;

    /* Container */
    --container-max: 1200px;
    --container-padding: 1rem;
}

/* ============================================
   Reset & Base
   ============================================ */

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

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

body {
    font-family: var(--font-primary);
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-text);
    background-color: var(--color-white);
}

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

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

ul,
ol {
    list-style: none;
}

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

/* ============================================
   Typography
   ============================================ */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-primary);
}

h1 {
    font-size: clamp(2rem, 5vw, 3.5rem);
}

h2 {
    font-size: clamp(1.5rem, 4vw, 2.5rem);
}

h3 {
    font-size: clamp(1.25rem, 3vw, 1.75rem);
}

h4 {
    font-size: 1.25rem;
}

p {
    margin-bottom: var(--space-md);
}

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

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

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

.text-center {
    text-align: center;
}

/* ============================================
   Layout & Container
   ============================================ */

.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.section {
    padding: var(--space-3xl) 0;
}

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

.section--dark {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.section--dark h2,
.section--dark h3 {
    color: var(--color-white);
}

.grid {
    display: grid;
    gap: var(--space-lg);
}

@media (min-width: 768px) {
    .grid--2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid--3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .grid--4 {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ============================================
   Buttons - Premium Gradient Edition
   ============================================ */

.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 0.875rem 1.75rem;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    border: none;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

/* Primary Button - World-Class Gradient */
.btn--primary {
    background: linear-gradient(135deg, #0e76b3 0%, #1a8fd4 100%);
    color: var(--color-white);
    box-shadow: 0 8px 24px rgba(14, 118, 179, 0.3);
    position: relative;
}

/* Shimmer Effect */
.btn--primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.6s;
}

.btn--primary:hover::before {
    left: 100%;
}

.btn--primary:hover {
    background: linear-gradient(135deg, #1a8fd4 0%, #0e76b3 100%);
    box-shadow: 0 12px 32px rgba(14, 118, 179, 0.4);
    transform: translateY(-2px);
}

.btn--primary:active {
    transform: translateY(0);
    box-shadow: 0 4px 16px rgba(14, 118, 179, 0.3);
}

/* Large Button */
.btn--large {
    padding: 1.125rem 2.25rem;
    font-size: 1.125rem;
}

/* Outline Button */
.btn--outline {
    background: transparent;
    border: 2px solid var(--color-accent);
    color: var(--color-accent);
}

.btn--outline:hover {
    background: linear-gradient(135deg, rgba(14, 118, 179, 0.1) 0%, rgba(26, 143, 212, 0.1) 100%);
    border-color: var(--color-accent-light);
    color: var(--color-accent-light);
}

.btn--icon {
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: var(--radius-full);
}

/* ============================================
   Header & Navigation
   ============================================ */

.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(10, 37, 64, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: all var(--transition-base);
}

.header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
}

.header__logo {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.header__logo-img {
    height: 42px;
    width: auto;
}

.header__logo-text {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--color-white);
    display: none;
    /* Hide text version when using image */
}

.header__logo-text span {
    color: var(--color-accent);
}

.nav {
    display: none;
}

@media (min-width: 992px) {
    .nav {
        display: flex;
        align-items: center;
        gap: var(--space-xl);
    }
}

.nav__link {
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
    padding: var(--space-sm) 0;
    position: relative;
}

.nav__link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--color-accent);
    transition: width var(--transition-base);
}

.nav__link:hover,
.nav__link--active {
    color: var(--color-white);
}

.nav__link:hover::after,
.nav__link--active::after {
    width: 100%;
}

.header__cta {
    display: none;
}

@media (min-width: 768px) {
    .header__cta {
        display: block;
    }
}

/* Mobile Menu */
.menu-toggle {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 8px;
}

@media (min-width: 992px) {
    .menu-toggle {
        display: none;
    }
}

.menu-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--color-white);
    border-radius: 2px;
    transition: all var(--transition-fast);
}

.mobile-nav {
    position: fixed;
    top: 72px;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-primary);
    padding: var(--space-xl);
    transform: translateX(100%);
    transition: transform var(--transition-base);
    z-index: 999;
}

.mobile-nav.active {
    transform: translateX(0);
}

.mobile-nav__link {
    display: block;
    color: var(--color-white);
    font-size: 1.25rem;
    font-weight: 500;
    padding: var(--space-md) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* ============================================
   Hero Section
   ============================================ */

.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding-top: 72px;
    overflow: hidden;
}

.hero__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
}

.hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
            rgba(10, 37, 64, 0.95) 0%,
            rgba(10, 37, 64, 0.7) 50%,
            rgba(10, 37, 64, 0.4) 100%);
}

.hero__content {
    position: relative;
    z-index: 1;
    max-width: 600px;
}

.hero__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    background: rgba(15, 23, 42, 0.6);
    /* Semi-transparent dark bg */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-left: 3px solid var(--color-accent);
    color: var(--color-white);
    padding: 0.5rem 1rem;
    border-radius: var(--radius-full);
    font-size: 0.9375rem;
    font-weight: 600;
    margin-bottom: var(--space-lg);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    letter-spacing: 0.02em;
    transition: transform 0.3s ease;
}

.hero__badge svg {
    color: var(--color-accent);
    /* Make icon pop */
    filter: drop-shadow(0 0 8px rgba(14, 118, 179, 0.6));
}

.hero__badge:hover {
    transform: translateY(-2px);
    background: rgba(15, 23, 42, 0.8);
    border-color: var(--color-accent);
}

.hero__title {
    color: var(--color-white);
    margin-bottom: var(--space-lg);
}

.hero__subtitle {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.125rem;
    margin-bottom: var(--space-2xl);
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
}

/* Trust Indicators */
.trust-bar {
    background: var(--color-white);
    padding: var(--space-lg) 0;
    border-bottom: 1px solid var(--color-border);
}

.trust-bar__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-xl);
}

.trust-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    color: var(--color-primary);
    background: var(--color-bg);
    padding: 1rem 1.5rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    transition: all 0.3s ease;
}

.trust-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    border-color: var(--color-accent);
}

.trust-item__content {
    display: flex;
    flex-direction: column;
}

.trust-item__title {
    font-weight: 700;
    font-size: 0.9375rem;
    color: var(--color-primary);
    line-height: 1.2;
}

.trust-item__subtitle {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.trust-item__icon {
    width: 40px;
    height: 40px;
    background: var(--color-success-light);
    color: var(--color-success);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

/* ============================================
   Cards - Premium Gradient Edition
   ============================================ */

.card {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 22, 71, 0.08);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

/* Premium Gradient Overlay */
.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(14, 118, 179, 0.03) 0%, rgba(0, 22, 71, 0.05) 100%);
    opacity: 0;
    transition: opacity 0.4s;
    pointer-events: none;
    z-index: 1;
}

.card:hover::before {
    opacity: 1;
}

.card:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 48px rgba(14, 118, 179, 0.15);
}

.card__image {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16/10;
}

.card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.card:hover .card__image img {
    transform: scale(1.05);
}

/* Gradient Shimmer on Image */
.card__image::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transform: skewX(-20deg);
    transition: left 0.8s;
}

.card:hover .card__image::after {
    left: 150%;
}

.card__content {
    padding: var(--space-lg);
    position: relative;
    z-index: 2;
}

.card__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: var(--space-sm);
    background: linear-gradient(135deg, #001647 0%, #0e76b3 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.card__text {
    color: var(--color-text-muted);
    line-height: 1.6;
    margin-bottom: var(--space-md);
}

.card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.card__tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0.375rem 0.75rem;
    background: linear-gradient(135deg, rgba(14, 118, 179, 0.08) 0%, rgba(0, 22, 71, 0.06) 100%);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    color: var(--color-accent);
    font-weight: 500;
    backdrop-filter: blur(10px);
}

/* ============================================
   Quote Form Enhancements
   ============================================ */

.quote-form {
    background: var(--color-white);
    padding: var(--space-3xl);
    border-radius: var(--radius-2xl);
    box-shadow: 0 24px 64px rgba(0, 22, 71, 0.12);
}

.quote-form__title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0;
}

.form-group {
    position: relative;
    margin-bottom: var(--space-lg);
}

.form-label {
    display: block;
    margin-bottom: var(--space-xs);
    color: var(--color-text);
    font-weight: 500;
    font-size: 0.9375rem;
}

.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: 0.875rem 1.125rem;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-lg);
    font-family: var(--font-primary);
    font-size: 1rem;
    transition: all var(--transition-base);
    background: var(--color-white);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 4px rgba(100, 116, 139, 0.1);
}

.form-input::placeholder {
    color: var(--color-text-muted);
    opacity: 0.6;
}

.form-select {
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
}

.form-textarea {
    resize: vertical;
    min-height: 100px;
}

.form-row {
    display: grid;
    gap: var(--space-md);
}

.form-row--2 {
    grid-template-columns: 1fr 1fr;
}

@media (max-width: 768px) {
    .form-row--2 {
        grid-template-columns: 1fr;
    }

    .quote-form {
        padding: var(--space-xl);
    }
}

/* ============================================
   Features / Services Grid
   ============================================ */

.feature {
    text-align: center;
    padding: var(--space-xl);
}

.feature__icon {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, var(--color-accent), var(--color-accent-light));
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    margin: 0 auto var(--space-lg);
    color: var(--color-primary-dark);
}

.feature__title {
    margin-bottom: var(--space-sm);
}

.feature__text {
    color: var(--color-text-muted);
    font-size: 0.9375rem;
}

/* ============================================
   Section Headers
   ============================================ */

.section-header {
    text-align: center;
    max-width: 600px;
    margin: 0 auto var(--space-2xl);
}

.section-header__tag {
    display: inline-block;
    background: rgba(245, 166, 35, 0.15);
    color: var(--color-accent);
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-full);
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: var(--space-md);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.section-header__title {
    margin-bottom: var(--space-md);
}

.section-header__text {
    color: var(--color-text-muted);
}

/* ============================================
   Footer
   ============================================ */

.footer {
    background: var(--color-primary-dark);
    color: rgba(255, 255, 255, 0.7);
    padding: var(--space-3xl) 0 var(--space-lg);
}

.footer__grid {
    display: grid;
    gap: var(--space-2xl);
    margin-bottom: var(--space-2xl);
}

@media (min-width: 768px) {
    .footer__grid {
        grid-template-columns: 2fr 1fr 1fr 1fr;
    }
}

.footer__brand {
    max-width: 280px;
}

.footer__logo {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--color-white);
    margin-bottom: var(--space-md);
}

.footer__logo span {
    color: var(--color-accent);
}

.footer__desc {
    font-size: 0.9375rem;
    line-height: 1.7;
}

.footer__title {
    color: var(--color-white);
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: var(--space-lg);
}

.footer__links {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.footer__link {
    font-size: 0.9375rem;
    transition: color var(--transition-fast);
}

.footer__link:hover {
    color: var(--color-accent);
}

.footer__contact-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
    font-size: 0.9375rem;
}

.footer__contact-icon {
    color: var(--color-accent);
    margin-top: 2px;
}

.footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: var(--space-lg);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-md);
    font-size: 0.875rem;
}

.footer__legal {
    display: flex;
    gap: var(--space-lg);
}

/* ============================================
   Utilities
   ============================================ */

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.fade-in {
    animation: fadeIn 0.6s ease forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Scroll Animation Helper */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================
   Logo Intro Animation
   ============================================ */

.intro-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    transition: opacity 0.8s ease, visibility 0.8s ease;
}

.intro-logo {
    width: 60vw;
    max-width: 500px;
    height: auto;
    /* World-class snappy entrance: 0.8s, single run, stops at center */
    animation: moveIn 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes moveIn {
    0% {
        opacity: 0;
        transform: translateX(-80px) scale(0.95);
    }

    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

.intro-overlay.animate .intro-logo {
    /* No longer needed but kept empty for JS compatibility/safety */
}

.intro-overlay.intro-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}


/* ============================================
   Floating Call Widget (Cloud + Button)
   ============================================ */

.floating-container {
    position: fixed;
    right: 2rem;
    bottom: 2rem;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    /* Closer gap for integrated look */
    z-index: 9999;
    pointer-events: none;
}

.floating-container>* {
    pointer-events: auto;
}

.floating-cloud {
    background: #ffffff;
    padding: 16px 20px;
    border-radius: 18px;
    border-bottom-right-radius: 4px;
    /* Anchor point for the tail */
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.1),
        0 2px 8px rgba(0, 0, 0, 0.05);
    max-width: 280px;
    font-size: 0.95rem;
    /* Slightly larger text */
    font-weight: 500;
    color: #1a202c;
    line-height: 1.4;
    text-align: left;
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 4px;
    /* Space for the arrow */
    order: 1;
    animation: gentleIntro 0.5s ease-out forwards;
    transform-origin: bottom right;
}

.floating-cloud:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.cloud-text {
    flex: 1;
    white-space: normal;
    word-wrap: break-word;
}

.cloud-close {
    background: #f1f5f9;
    border: none;
    color: #64748b;
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    line-height: 1;
    transition: all 0.2s;
    flex-shrink: 0;
    margin-top: -4px;
    margin-right: -8px;
}

.cloud-close:hover {
    background: #e2e8f0;
    color: #1a202c;
}

/* Arrow pointing down to button */
.floating-cloud::after {
    content: '';
    position: absolute;
    bottom: -6px;
    right: 0;
    width: 14px;
    height: 14px;
    background: #ffffff;
    border-bottom-right-radius: 20px;
    /* Curve the tail */
    /* Clip path to make it a nice curve connection or simple triangle */
    /* Let's stick to simple triangle for robustness matching screenshot */
    width: 0;
    height: 0;
    border-left: 0 solid transparent;
    border-right: 16px solid transparent;
    border-top: 16px solid #ffffff;
    transform: rotate(0deg);
    right: 10px;
    /* Align with button center visually */
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.05));
    display: none;
    /* Hide standard triangle, use custom shape below */
}

/* Custom curved tail matching the screenshot "integrated" look */
.floating-cloud::before {
    content: '';
    position: absolute;
    bottom: -8px;
    right: 20px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 12px 10px 0 10px;
    border-color: #ffffff transparent transparent transparent;
    filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.05));
}

.floating-call-btn {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, #0e76b3 0%, #1a8fd4 100%);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    order: 2;
    text-decoration: none;
    transition: transform 0.3s;
    animation: ripple 2s infinite ease-in-out;
}

.floating-call-btn svg {
    width: 28px;
    height: 28px;
}

/* Animacje */
@keyframes gentleBounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

@keyframes ripple {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(14, 118, 179, 0.7);
    }

    70% {
        transform: scale(1.05);
        box-shadow: 0 0 0 15px rgba(14, 118, 179, 0);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(14, 118, 179, 0);
    }
}

/* Poprawka dla telefonów */
@media (max-width: 768px) {
    .floating-container {
        right: 1rem;
        bottom: 1rem;
    }

    .floating-call-btn {
        width: 56px;
        height: 56px;
    }
}

/* ============================================
   Logo Intro Animation
   ============================================ */

.intro-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.intro-logo {
    width: 50vw;
    max-width: 600px;
    height: auto;
    transition: all 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}

.intro-overlay.animate .intro-logo {
    transform: translate(calc(-50vw + 40px), calc(-50vh + 36px)) scale(0.15);
    /* Approximate move to top left. 
       Center is 50vw, 50vh. 
       Top left target is approx 20px, 15px.
       Delta X = 20px - 50vw
       Delta Y = 15px - 50vh
       Scale 0.15 * 600px = 90px width... 
       This is a rough approximation. 
       Better to just fade out? 
       User insists on movement. 
       Let's try a simpler fixed positioning approach.
    */
}

/* Better Approach for "Move to Corner" Animation */
.intro-overlay.move-logo {
    background-color: transparent;
    /* Fade out background first/simultaneously */
    pointer-events: none;
}

.intro-overlay.move-logo .intro-logo {
    position: fixed;
    top: 15px;
    /* Match header logo top */
    left: 5%;
    /* Match container padding approx */
    width: auto;
    height: 42px;
    /* Match header logo height */
    transform: translate(0, 0);
    /* Reset centering transform if any */
}

/* Initial Centered State */
.intro-logo {
    /* We use flexbox in parent to center, so no transform needed here normally, 
       but if we switch to fixed positioning for animation, we need to handle state change. */
}

/* Keyframes approach might be smoother for a single animation run */
@keyframes introSequence {
    0% {
        opacity: 1;
        transform: scale(1);
    }

    30% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        /* We can't easily animate to exact DOM position of another element with just CSS keyframes 
           without Flip technique (JS). 
           We will simulate it by fading out this overlay and fading in the header.
           BUT user requested movement.
           
           Let's use the JS we added to add a class 'intro-finish'.
           We will define the 'intro-finish' state in CSS.
        */
        opacity: 0;
        visibility: hidden;
    }
}

.intro-overlay.intro-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* ============================================
   Floating Call Button
   ============================================ */

.floating-call-btn {
    position: fixed;
    right: 2rem;
    bottom: 2rem;
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, #0e76b3 0%, #1a8fd4 100%);
    color: var(--color-white);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(14, 118, 179, 0.4);
    z-index: 999;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    animation: floatingPulse 2s ease-in-out infinite;
}

.floating-call-btn:hover {
    transform: scale(1.1) translateY(-4px);
    box-shadow: 0 12px 32px rgba(14, 118, 179, 0.5);
    background: linear-gradient(135deg, #1a8fd4 0%, #0e76b3 100%);
}

.floating-call-btn:active {
    transform: scale(0.95);
}

@keyframes floatingPulse {

    0%,
    100% {
        box-shadow: 0 8px 24px rgba(14, 118, 179, 0.4);
    }

    50% {
        box-shadow: 0 8px 24px rgba(14, 118, 179, 0.4), 0 0 0 12px rgba(14, 118, 179, 0.1);
    }
}

/* Mobile responsive */
@media (max-width: 768px) {
    .floating-call-btn {
        width: 56px;
        height: 56px;
        right: 1.5rem;
        bottom: 1.5rem;
    }

    .floating-call-btn svg {
        width: 24px;
        height: 24px;
    }
}