/* ==========================================================================
   EuroNova - Premium corporate styles
   Apple-inspired, glassmorphism, soft shadows, elegant typography
   ========================================================================== */

:root{
    --eu-primary:      #0F172A;
    --eu-secondary:    #2563EB;
    --eu-accent:       #14B8A6;
    --eu-bg:           #FFFFFF;
    --eu-bg-soft:      #F8FAFC;
    --eu-text:         #111827;
    --eu-muted:        #64748B;
    --eu-border:       rgba(15,23,42,.08);
    --eu-card:         #FFFFFF;
    --eu-shadow-sm:    0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
    --eu-shadow-md:    0 8px 24px -8px rgba(15,23,42,.12), 0 4px 12px rgba(15,23,42,.05);
    --eu-shadow-lg:    0 30px 60px -20px rgba(15,23,42,.18), 0 12px 24px -8px rgba(15,23,42,.08);
    --eu-gradient:     linear-gradient(135deg, #2563EB 0%, #14B8A6 100%);
    --eu-gradient-soft:linear-gradient(135deg, rgba(37,99,235,.08), rgba(20,184,166,.08));
    --eu-radius:       18px;
    --eu-radius-sm:    12px;
    --eu-radius-lg:    28px;
    --eu-nav-h:        76px;
}

[data-bs-theme="dark"]{
    --eu-primary:      #F8FAFC;
    --eu-bg:           #0B1220;
    --eu-bg-soft:      #0F172A;
    --eu-text:         #E5E7EB;
    --eu-muted:        #94A3B8;
    --eu-border:       rgba(255,255,255,.08);
    --eu-card:         rgba(255,255,255,.04);
    --eu-shadow-md:    0 10px 30px -10px rgba(0,0,0,.6);
    --eu-shadow-lg:    0 30px 80px -20px rgba(0,0,0,.7);
    --eu-gradient-soft:linear-gradient(135deg, rgba(37,99,235,.18), rgba(20,184,166,.14));
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
    font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    color: var(--eu-text);
    background: var(--eu-bg);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    padding-top: var(--eu-nav-h);
}

h1,h2,h3,h4,h5,h6,.display-1,.display-2,.display-3,.display-4{
    font-family:'Poppins', 'Inter', sans-serif;
    color: var(--eu-primary);
    font-weight: 700;
    letter-spacing:-.015em;
    line-height: 1.15;
}
h1{ font-size: clamp(2.2rem, 4.8vw, 4rem); font-weight:800; letter-spacing:-.03em; }
h2{ font-size: clamp(1.8rem, 3.4vw, 2.75rem); letter-spacing:-.02em; }
h3{ font-size: clamp(1.35rem, 2vw, 1.75rem); }

p{ color: var(--eu-text); }
.text-muted-eu{ color: var(--eu-muted) !important; }
a{ color: var(--eu-secondary); text-decoration:none; transition: color .2s ease; }
a:hover{ color: var(--eu-accent); }

.section{ padding: clamp(72px, 10vw, 140px) 0; }
.section-tight{ padding: clamp(56px, 7vw, 96px) 0; }
.eyebrow{
    display:inline-flex; align-items:center; gap:.5rem;
    padding:.4rem .85rem;
    border-radius:999px;
    background: var(--eu-gradient-soft);
    color: var(--eu-secondary);
    font-weight:600; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase;
}
[data-bs-theme="dark"] .eyebrow{ color:#7DD3FC; }

.lead-eu{ color: var(--eu-muted); font-size:1.125rem; max-width: 720px; }

/* -------------------------------------------------------------------------- */
/* Navigation                                                                 */
/* -------------------------------------------------------------------------- */
.navbar-euronova{
    background: rgba(255,255,255,.72);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--eu-border);
    min-height: var(--eu-nav-h);
    transition: background .3s ease, box-shadow .3s ease;
}
[data-bs-theme="dark"] .navbar-euronova{ background: rgba(11,18,32,.7); }
.navbar-euronova.scrolled{ box-shadow: var(--eu-shadow-sm); }

.navbar-brand{ font-family:'Poppins', sans-serif; font-weight:700; color: var(--eu-primary); font-size:1.15rem; }
.navbar-brand strong{ font-weight:800; }
.navbar-euronova .nav-link{
    color: var(--eu-text);
    font-weight:500; font-size:.95rem;
    padding:.5rem .9rem !important;
    border-radius:8px;
    transition:.2s ease;
}
.navbar-euronova .nav-link:hover{ color: var(--eu-secondary); background: var(--eu-gradient-soft); }
.navbar-euronova .nav-link.active{ color: var(--eu-secondary); }

.btn-primary-eu{
    background: var(--eu-gradient);
    color:#fff;
    border:0;
    padding:.65rem 1.35rem;
    border-radius:999px;
    font-weight:600;
    box-shadow: 0 8px 20px -6px rgba(37,99,235,.4);
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-primary-eu:hover{ color:#fff; transform: translateY(-1px); box-shadow: 0 12px 26px -8px rgba(37,99,235,.55); filter:brightness(1.05); }
.btn-outline-eu{
    background:transparent; color: var(--eu-primary);
    border:1px solid var(--eu-border);
    padding:.65rem 1.35rem; border-radius:999px; font-weight:600;
    transition:.2s ease;
}
.btn-outline-eu:hover{ background: var(--eu-bg-soft); color:var(--eu-primary); border-color: rgba(15,23,42,.18); }
.btn-icon{
    width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center;
    border-radius:50%; border:1px solid var(--eu-border); background: transparent; color: var(--eu-primary);
    transition:.2s ease;
}
.btn-icon:hover{ background: var(--eu-bg-soft); }

/* -------------------------------------------------------------------------- */
/* Hero                                                                       */
/* -------------------------------------------------------------------------- */
.hero{
    position:relative;
    padding: clamp(80px, 10vw, 140px) 0 clamp(60px, 8vw, 120px);
    overflow:hidden;
}
.hero::before{
    content:""; position:absolute; inset:-20% -10% auto -10%; height:120%;
    background:
        radial-gradient(60% 60% at 15% 20%, rgba(37,99,235,.18), transparent 60%),
        radial-gradient(50% 60% at 85% 10%, rgba(20,184,166,.16), transparent 60%),
        radial-gradient(70% 60% at 60% 90%, rgba(37,99,235,.08), transparent 60%);
    filter: blur(20px);
    z-index:-1;
    animation: heroGradient 18s ease-in-out infinite alternate;
}
@keyframes heroGradient{
    0%   { transform: translate3d(0,0,0) scale(1); }
    100% { transform: translate3d(-2%,2%,0) scale(1.08); }
}
.hero h1 span.grad{
    background: var(--eu-gradient);
    -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-illu{
    position:relative;
    border-radius: var(--eu-radius-lg);
    background: var(--eu-card);
    box-shadow: var(--eu-shadow-lg);
    border:1px solid var(--eu-border);
    padding: 28px;
    overflow:hidden;
}
[data-bs-theme="dark"] .hero-illu{ background: rgba(255,255,255,.04); }
.hero-illu::after{
    content:""; position:absolute; inset:0;
    background: linear-gradient(135deg, rgba(37,99,235,.06), rgba(20,184,166,.06));
    pointer-events:none;
}
.float-chip{
    position:absolute;
    background: rgba(255,255,255,.9);
    backdrop-filter: blur(14px);
    border:1px solid var(--eu-border);
    border-radius:14px;
    padding:.55rem .85rem;
    box-shadow: var(--eu-shadow-md);
    display:inline-flex; align-items:center; gap:.5rem;
    font-weight:600; font-size:.85rem; color:var(--eu-primary);
    animation: floaty 6s ease-in-out infinite;
}
[data-bs-theme="dark"] .float-chip{ background: rgba(15,23,42,.7); color:#E5E7EB; }
.float-chip i{ color: var(--eu-secondary); }
.float-chip.c1{ top:6%;  left:1%;  animation-delay:0s; }
.float-chip.c2{ top:44%; right:2%; animation-delay:1.5s; }
.float-chip.c3{ bottom:6%; left:8%; animation-delay:3s; }
@keyframes floaty{
    0%,100%{ transform: translateY(0); }
    50%    { transform: translateY(-10px); }
}

/* -------------------------------------------------------------------------- */
/* Cards                                                                       */
/* -------------------------------------------------------------------------- */
.eu-card{
    background: var(--eu-card);
    border:1px solid var(--eu-border);
    border-radius: var(--eu-radius);
    padding: 28px;
    box-shadow: var(--eu-shadow-sm);
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
    /*height:100%;*/
}
.eu-card:hover{ transform: translateY(-6px); box-shadow: var(--eu-shadow-md); border-color: rgba(37,99,235,.25); }
.eu-card .icon{
    width:52px; height:52px; border-radius:14px;
    display:inline-flex; align-items:center; justify-content:center;
    background: var(--eu-gradient-soft); color: var(--eu-secondary);
    font-size:1.4rem; margin-bottom:1rem;
}
.eu-card h3{ font-size:1.2rem; margin-bottom:.5rem; }
.eu-card p{ color: var(--eu-muted); font-size:.95rem; margin-bottom:1rem; }
.eu-card .learn{
    font-weight:600; color: var(--eu-secondary);
    display:inline-flex; align-items:center; gap:.35rem;
}
.eu-card .learn:hover i{ transform: translateX(3px); }
.eu-card .learn i{ transition: transform .2s ease; }

.glass{
    background: rgba(255,255,255,.6);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border:1px solid rgba(255,255,255,.5);
}
[data-bs-theme="dark"] .glass{ background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.08); }

/* -------------------------------------------------------------------------- */
/* Experience / counters                                                       */
/* -------------------------------------------------------------------------- */
.stat{
    text-align:center; padding: 28px 20px;
    background: var(--eu-card); border:1px solid var(--eu-border);
    border-radius: var(--eu-radius);
    box-shadow: var(--eu-shadow-sm);
}
.stat .num{
    font-family:'Poppins', sans-serif; font-weight:800;
    font-size: clamp(2rem, 4vw, 2.75rem);
    background: var(--eu-gradient); -webkit-background-clip:text; background-clip:text; color:transparent;
    line-height:1;
}
.stat .label{ color: var(--eu-muted); font-weight:500; margin-top:.5rem; }

/* -------------------------------------------------------------------------- */
/* Process timeline                                                            */
/* -------------------------------------------------------------------------- */
.timeline{ position:relative; padding: 20px 0; }
.timeline::before{
    content:""; position:absolute; left:50%; top:0; bottom:0; width:2px;
    background: linear-gradient(to bottom, transparent, rgba(37,99,235,.35), rgba(20,184,166,.35), transparent);
    transform: translateX(-50%);
}
.tl-item{ position:relative; width:50%; padding: 20px 40px; }
.tl-item:nth-child(odd){ left:0; text-align:right; }
.tl-item:nth-child(even){ left:50%; }
.tl-item .dot{
    position:absolute; top:34px; width:18px; height:18px; border-radius:50%;
    background: var(--eu-gradient); box-shadow: 0 0 0 6px rgba(37,99,235,.12);
}
.tl-item:nth-child(odd) .dot{ right:-9px; }
.tl-item:nth-child(even) .dot{ left:-9px; }
.tl-card{
    display:inline-block; text-align:left;
    background: var(--eu-card); border:1px solid var(--eu-border);
    border-radius: var(--eu-radius); padding:22px 24px; box-shadow: var(--eu-shadow-sm);
    max-width:440px;
}
.tl-card .step{ font-size:.75rem; text-transform:uppercase; letter-spacing:.15em; color: var(--eu-secondary); font-weight:700; }
.tl-card h4{ margin:.25rem 0 .5rem; font-size:1.15rem; }
.tl-card p{ color: var(--eu-muted); font-size:.92rem; margin:0; }
@media (max-width: 767.98px){
    .timeline::before{ left:16px; }
    .tl-item, .tl-item:nth-child(even){ width:100%; left:0; padding: 12px 0 12px 40px; text-align:left; }
    .tl-item:nth-child(odd){ text-align:left; }
    .tl-item .dot{ left:8px !important; right:auto !important; top:26px; }
}

/* -------------------------------------------------------------------------- */
/* Tech pills                                                                  */
/* -------------------------------------------------------------------------- */
.tech-pill{
    display:inline-flex; align-items:center; gap:.5rem;
    padding:.55rem .95rem;
    border-radius:999px;
    background: var(--eu-bg-soft);
    border:1px solid var(--eu-border);
    color: var(--eu-primary); font-weight:500; font-size:.92rem;
    transition:.2s ease;
}
.tech-pill:hover{ transform: translateY(-2px); color: var(--eu-secondary); border-color: rgba(37,99,235,.25); }

/* -------------------------------------------------------------------------- */
/* Portfolio                                                                   */
/* -------------------------------------------------------------------------- */
.portfolio-card{
    position:relative; border-radius: var(--eu-radius);
    overflow:hidden; background: var(--eu-card);
    border:1px solid var(--eu-border); box-shadow: var(--eu-shadow-sm);
    transition:.3s ease;
    height:100%;
}
.portfolio-card:hover{ transform: translateY(-6px); box-shadow: var(--eu-shadow-md); }
.portfolio-thumb{
    aspect-ratio: 16/10;
    background: var(--eu-gradient);
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-family:'Poppins', sans-serif; font-weight:700; font-size:1.4rem;
    letter-spacing:-.02em; text-align:center; padding:24px;
    position:relative; overflow:hidden;
}
.portfolio-thumb::after{
    content:""; position:absolute; inset:0;
    background:
        radial-gradient(120% 80% at 20% 10%, rgba(255,255,255,.25), transparent 55%),
        radial-gradient(80% 60% at 90% 90%, rgba(0,0,0,.2), transparent 55%);
}
.portfolio-thumb .txt{ position:relative; z-index:1; }
.portfolio-body{ padding:22px 24px; }
.portfolio-body .cats{ font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; color: var(--eu-muted); font-weight:600; }
.portfolio-body h3{ font-size:1.15rem; margin:.35rem 0 .5rem; }
.portfolio-body p{ font-size:.92rem; color: var(--eu-muted); }
.filter-btn{
    background: transparent; border:1px solid var(--eu-border);
    padding:.45rem 1rem; border-radius:999px; font-size:.88rem; font-weight:500;
    color: var(--eu-primary); transition:.2s ease;
}
.filter-btn:hover, .filter-btn.active{ background: var(--eu-gradient); color:#fff; border-color:transparent; }

/* -------------------------------------------------------------------------- */
/* CTA                                                                         */
/* -------------------------------------------------------------------------- */
.cta{
    position:relative;
    border-radius: var(--eu-radius-lg);
    padding: clamp(48px, 6vw, 80px);
    background: linear-gradient(135deg, #0F172A 0%, #1E3A8A 55%, #0F766E 100%);
    color:#fff; overflow:hidden;
    box-shadow: var(--eu-shadow-lg);
}
.cta::before{
    content:""; position:absolute; inset:-40%;
    background: radial-gradient(40% 40% at 20% 20%, rgba(20,184,166,.35), transparent 60%),
                radial-gradient(40% 40% at 80% 80%, rgba(37,99,235,.35), transparent 60%);
    filter: blur(20px);
}
.cta > *{ position:relative; }
.cta h2{ color:#fff; }
.cta .btn-primary-eu{ background:#fff; color: var(--eu-primary); }
.cta .btn-primary-eu:hover{ filter:none; background:#F8FAFC; color: var(--eu-primary); }

/* -------------------------------------------------------------------------- */
/* Forms                                                                       */
/* -------------------------------------------------------------------------- */
.form-control, .form-select{
    border-radius: var(--eu-radius-sm);
    border:1px solid var(--eu-border);
    padding:.75rem 1rem;
    background: var(--eu-card);
    color: var(--eu-text);
    transition:.2s ease;
}
.form-control:focus, .form-select:focus{
    border-color: rgba(37,99,235,.5);
    box-shadow: 0 0 0 4px rgba(37,99,235,.14);
}
.form-label{ font-weight:500; color: var(--eu-primary); font-size:.9rem; }

/* -------------------------------------------------------------------------- */
/* Blog cards                                                                  */
/* -------------------------------------------------------------------------- */
.blog-card{
    background: var(--eu-card); border:1px solid var(--eu-border);
    border-radius: var(--eu-radius); overflow:hidden; box-shadow: var(--eu-shadow-sm);
    transition:.3s ease; height:100%;
}
.blog-card:hover{ transform: translateY(-6px); box-shadow: var(--eu-shadow-md); }
.blog-thumb{ aspect-ratio:16/9; background: var(--eu-gradient); }
.blog-body{ padding:22px 24px; }
.blog-cat{ font-size:.75rem; text-transform:uppercase; letter-spacing:.12em; color: var(--eu-secondary); font-weight:700; }
.blog-body h3{ font-size:1.15rem; margin:.4rem 0 .5rem; }
.blog-body p{ color: var(--eu-muted); font-size:.92rem; }
.blog-meta{ font-size:.82rem; color: var(--eu-muted); }

/* -------------------------------------------------------------------------- */
/* Footer                                                                      */
/* -------------------------------------------------------------------------- */
.site-footer{
    background: var(--eu-bg-soft);
    border-top:1px solid var(--eu-border);
    padding: 72px 0 0;
    margin-top: 40px;
}
.site-footer h6{ font-family:'Poppins', sans-serif; font-weight:600; color: var(--eu-primary); margin-bottom:1rem; }
.site-footer ul li{ margin-bottom:.5rem; }
.site-footer ul a{ color: var(--eu-muted); }
.site-footer ul a:hover{ color: var(--eu-secondary); }
.site-footer .social a{
    width:38px; height:38px; border-radius:50%;
    display:inline-flex; align-items:center; justify-content:center;
    background: var(--eu-card); border:1px solid var(--eu-border); color: var(--eu-primary);
    transition:.2s ease;
}
.site-footer .social a:hover{ background: var(--eu-gradient); color:#fff; border-color:transparent; }
.footer-brand{ color: var(--eu-primary); font-family:'Poppins', sans-serif; }

/* -------------------------------------------------------------------------- */
/* Utilities                                                                   */
/* -------------------------------------------------------------------------- */
.to-top{
    position:fixed; right:35px; bottom:200px; z-index:1030;
    width:46px; height:46px; border-radius:50%; border:0;
    background: var(--eu-gradient); color:#fff;
    box-shadow: var(--eu-shadow-md);
    opacity:0; pointer-events:none; transform: translateY(10px);
    transition:.25s ease;
}
.to-top.show{ opacity:1; pointer-events:auto; transform: translateY(0); }
.skip-link{
    position:absolute; top:0; left:0; padding:.5rem 1rem; background:#0F172A; color:#fff; z-index:2000;
}

.section-head{ max-width: 780px; margin: 0 auto 56px; text-align:center; }
.section-head .eyebrow{ margin-bottom: 1rem; }

.page-hero{
    padding: clamp(80px, 10vw, 140px) 0 clamp(40px, 6vw, 80px);
    background:
        radial-gradient(60% 80% at 20% 20%, rgba(37,99,235,.08), transparent 60%),
        radial-gradient(50% 70% at 80% 20%, rgba(20,184,166,.08), transparent 60%);
    text-align:center;
}
.page-hero h1{ margin-bottom: 1rem; }
.page-hero p{ color: var(--eu-muted); max-width: 720px; margin: 0 auto; font-size:1.1rem; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
    *{ animation:none !important; transition:none !important; }
    html{ scroll-behavior:auto; }
}


.whatsapp-float{
    position:fixed;
    bottom:25px;
    right:25px;
    width:65px;
    height:65px;
    background:#25D366;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    text-decoration:none;
    z-index:9999;
    box-shadow:0 8px 25px rgba(0,0,0,.25);
    animation:pulse 2s infinite;
    transition:.3s;
}

.whatsapp-float:hover{
    transform:scale(1.1);
    animation:none;
}

.whatsapp-float svg{
    width:34px;
    height:34px;
}

.tooltip{
    position:absolute;
    right:80px;
    white-space:nowrap;
    background:#222;
    color:#fff;
    padding:8px 12px;
    border-radius:6px;
    font-size:14px;
    opacity:0;
    visibility:hidden;
    transition:.3s;
}

.whatsapp-float:hover .tooltip{
    opacity:1;
    visibility:visible;
}

@keyframes pulse{
    0%{
        box-shadow:0 0 0 0 rgba(37,211,102,.7);
    }
    70%{
        box-shadow:0 0 0 18px rgba(37,211,102,0);
    }
    100%{
        box-shadow:0 0 0 0 rgba(37,211,102,0);
    }
}

@media(max-width:768px){
    .whatsapp-float{
        width:58px;
        height:58px;
        bottom:20px;
        right:20px;
    }

    .tooltip{
        display:none;
    }
}