/* ==========================================================
   TITANNO — PREMIUM POLISH & UI/UX AUDIT LAYER
   Loaded AFTER style.css. Nothing here changes structure,
   navigation, content or functionality — only visual polish,
   consistency and a unified premium background system.
   ========================================================== */

/* ----------------------------------------------------------
   1. GLOBAL PREMIUM BACKGROUND SYSTEM
   One consistent aerospace / robotics background used on
   every single page: gradient base, blueprint grid, soft
   corner glows, abstract geometric shapes and slow-drifting
   particles. Sits fixed behind all page content.
---------------------------------------------------------- */

.bg-fx{
    position:fixed;
    inset:0;
    z-index:-5;
    overflow:hidden;
    pointer-events:none;
    background:
        radial-gradient(circle at 14% 20%, rgba(59,130,246,.14), transparent 42%),
        radial-gradient(circle at 88% 14%, rgba(212,175,55,.12), transparent 45%),
        radial-gradient(circle at 22% 88%, rgba(212,175,55,.09), transparent 42%),
        radial-gradient(circle at 86% 82%, rgba(59,130,246,.13), transparent 45%),
        linear-gradient(160deg, #0a0c11 0%, #12151d 30%, #171d2b 58%, #0d1019 100%);
}

.bg-grid{
    position:absolute;
    inset:-60px;
    background-image:
        linear-gradient(rgba(91,157,255,.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(91,157,255,.07) 1px, transparent 1px);
    background-size:64px 64px;
    -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 15%, #000 0%, transparent 78%);
    mask-image:radial-gradient(ellipse 90% 70% at 50% 15%, #000 0%, transparent 78%);
    animation:bgGridDrift 46s linear infinite;
    opacity:.9;
}

@keyframes bgGridDrift{
    from{ background-position:0 0, 0 0; }
    to{ background-position:64px 64px, 64px 64px; }
}

.bg-glow{
    position:absolute;
    border-radius:50%;
    filter:blur(90px);
    opacity:.4;
    will-change:transform;
}

.bg-glow-1{ width:480px; height:480px; top:-160px; left:-140px; background:#3b82f6; animation:bgFloat1 24s ease-in-out infinite; }
.bg-glow-2{ width:420px; height:420px; top:8%; right:-160px; background:#d4af37; animation:bgFloat2 28s ease-in-out infinite; }
.bg-glow-3{ width:520px; height:520px; bottom:-220px; left:8%; background:#1c2942; opacity:.55; animation:bgFloat1 32s ease-in-out infinite reverse; }
.bg-glow-4{ width:360px; height:360px; bottom:-140px; right:6%; background:#3b82f6; opacity:.3; animation:bgFloat2 26s ease-in-out infinite reverse; }

@keyframes bgFloat1{
    0%,100%{ transform:translate(0,0); }
    50%{ transform:translate(45px,35px); }
}

@keyframes bgFloat2{
    0%,100%{ transform:translate(0,0); }
    50%{ transform:translate(-40px,28px); }
}

.bg-particles{
    position:absolute;
    inset:0;
    background-image:
        radial-gradient(1.5px 1.5px at 8% 15%, rgba(59,130,246,.55) 0, transparent 60%),
        radial-gradient(1.5px 1.5px at 25% 65%, rgba(212,175,55,.45) 0, transparent 60%),
        radial-gradient(1.5px 1.5px at 45% 30%, rgba(255,255,255,.3) 0, transparent 60%),
        radial-gradient(1.5px 1.5px at 65% 82%, rgba(59,130,246,.4) 0, transparent 60%),
        radial-gradient(1.5px 1.5px at 80% 22%, rgba(212,175,55,.35) 0, transparent 60%),
        radial-gradient(1.5px 1.5px at 92% 60%, rgba(255,255,255,.22) 0, transparent 60%),
        radial-gradient(1.5px 1.5px at 15% 92%, rgba(59,130,246,.3) 0, transparent 60%),
        radial-gradient(1.5px 1.5px at 55% 6%, rgba(212,175,55,.3) 0, transparent 60%),
        radial-gradient(1.5px 1.5px at 38% 48%, rgba(255,255,255,.2) 0, transparent 60%),
        radial-gradient(1.5px 1.5px at 72% 40%, rgba(59,130,246,.28) 0, transparent 60%);
    animation:bgParticleDrift 20s ease-in-out infinite alternate;
}

@keyframes bgParticleDrift{
    from{ transform:translateY(0); }
    to{ transform:translateY(-34px); }
}

.bg-shapes{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    opacity:.5;
}

.bg-shapes .shape{
    fill:none;
    stroke-width:1;
}

.bg-shapes .shape-blue{ stroke:rgba(91,157,255,.22); }
.bg-shapes .shape-gold{ stroke:rgba(212,175,55,.2); }

.bg-shapes .spin-slow{
    transform-origin:center;
    animation:bgSpinSlow 90s linear infinite;
}

.bg-shapes .spin-slow-rev{
    transform-origin:center;
    animation:bgSpinSlow 130s linear infinite reverse;
}

@keyframes bgSpinSlow{
    from{ transform:rotate(0deg); }
    to{ transform:rotate(360deg); }
}

@media(prefers-reduced-motion:reduce){
    .bg-grid,.bg-glow,.bg-particles,.bg-shapes .spin-slow,.bg-shapes .spin-slow-rev{
        animation:none !important;
    }
}

/* Hide the heavy background system on very small devices to protect
   battery / scroll performance — the base gradient still shows via body */
@media(max-width:480px){
    .bg-particles{ opacity:.6; }
}

/* ----------------------------------------------------------
   2. LET THE GLOBAL BACKGROUND SHOW THROUGH EVERY SECTION
   Every page previously painted plain, flat panels on top
   of the body. Those flat fills are removed here so the same
   premium background reads continuously site-wide.
---------------------------------------------------------- */

body{
    background:#0d1019;
}

.company,
.services,
.products-home,
.locations,
.content-section,
.partners-collab{
    background:transparent;
}

.content-section::before,
.services::before,
.company::before{
    opacity:.03;
}

/* ----------------------------------------------------------
   3. SEAMLESS SECTION TRANSITIONS (Home: Hero -> next section)
   Blends the hero's animated gradient into the shared page
   background instead of cutting off hard at the section edge.
---------------------------------------------------------- */

.hero{
    position:relative;
}

.hero::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:220px;
    background:linear-gradient(to bottom, rgba(13,16,25,0), rgba(13,16,25,.92));
    pointer-events:none;
    z-index:1;
}

.company{
    padding-top:70px;
    margin-top:0;
}

.company .section-title{
    padding-top:0;
}

/* Same treatment for every interior page: soften the join
   between the photographic page-banner and the content below */

.page-banner{
    position:relative;
}

.page-banner::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:140px;
    background:linear-gradient(to bottom, rgba(13,16,25,0), rgba(13,16,25,.95));
    pointer-events:none;
}

/* ----------------------------------------------------------
   4. ABOUT PAGE — "Why Choose Titanno" layout fix
   Heading + intro paragraph centered above the three cards,
   instead of sitting beside them as a fourth grid column.
---------------------------------------------------------- */

.services .section-title{
    grid-column:1 / -1;
    max-width:820px;
    margin:0 auto;
    padding-bottom:55px;
}

/* ----------------------------------------------------------
   5. PARTNER CARDS — equal height + bottom-aligned buttons
---------------------------------------------------------- */

.partner-grid{
    align-items:stretch;
}

.partner-card{
    display:flex;
    flex-direction:column;
    align-self:stretch;
}

.partner-card h3{
    margin-bottom:10px;
}

.partner-card p{
    flex-grow:1;
}

.partner-btn-row{
    margin-top:24px;
    justify-content:center;
}

/* ----------------------------------------------------------
   6. LOGO
   Recolored source PNG so every TITANNO letter now sits in
   the same blue family as the rest of the mark (see images/logo.png).
   A touch of extra lift here keeps it crisp on the dark navbar.
---------------------------------------------------------- */

.logo img{
    filter:drop-shadow(0 0 10px rgba(59,130,246,.25));
}

/* ----------------------------------------------------------
   7. SITE-WIDE CONSISTENCY PASS
   30+ small inconsistencies found in the UI/UX audit,
   unified without touching layout, structure or copy.
---------------------------------------------------------- */

/* 7.1 — Navbar container width didn't match the page container,
   so the logo/links drifted out of alignment with content below */
.navbar{
    max-width:1300px;
}

/* 7.2 — Hero content width aligned to the same 1300px rhythm */
.hero-flex{
    max-width:1300px;
}

/* 7.3 — Section heading scale was inconsistent (45 / 40 / 48 / 46px
   across four different sections doing the same job). Unified. */
.section-title h2,
.content-section h2,
.why-left h2,
.cta h2{
    font-size:42px;
}

.section-title p{
    max-width:700px;
    width:100%;
}

/* 7.4 — Pill button radius family: primary CTAs unified to 40px
   (hero-btn was 45px, product-card button was 35px) */
.hero-btn,
.hero-btn-outline,
.product-card button{
    border-radius:40px;
}

/* 7.5 — Card corner radius unified across the card family
   (domain-card was 20px while every other card was 18px) */
.domain-card{
    border-radius:18px;
}

/* 7.6 — Card resting + hover shadow language unified across
   every card type so elevation reads the same everywhere */
.card,
.info-card,
.product-card,
.partner-card,
.product-mini-card,
.location-card{
    box-shadow:0 10px 30px rgba(0,0,0,.3);
    transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease, background .35s ease;
}

.card:hover,
.info-card:hover,
.product-card:hover,
.partner-card:hover,
.product-mini-card:hover,
.location-card:hover{
    box-shadow:0 22px 45px rgba(0,0,0,.4), 0 0 0 1px var(--border-glow), 0 0 30px rgba(212,175,55,.15);
    transform:translateY(-8px);
}

.card.show:hover,
.product-card.show:hover,
.partner-card.show:hover,
.info-card.show:hover,
.product-mini-card:hover{
    transform:translateY(-8px);
}

.domain-card:hover{
    transform:translateY(-10px);
}

.domain-card.show:hover{
    transform:translateY(-10px);
}

/* 7.7 — Partner logo strip used a different, smaller lift; kept
   intentionally lighter since it's a dense marquee, but aligned
   the timing curve with the rest of the site */
.partner-logo{
    transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

/* 7.8 — Consistent focus states for keyboard users across every
   interactive element (previously none were defined anywhere) */
a:focus-visible,
button:focus-visible,
.hero-btn:focus-visible,
.hero-btn-outline:focus-visible,
.touch-btn:focus-visible,
.view-page-btn:focus-visible,
.visit-btn:focus-visible,
.filter-btn:focus-visible,
.back-btn:focus-visible,
.learn-more:focus-visible,
.icons a:focus-visible,
.nav-links a:focus-visible{
    outline:2px solid #5b9dff;
    outline-offset:3px;
    border-radius:6px;
}

/* 7.9 — Footer social icons: some pages left the <i> icons bare
   (not focusable/clickable) while Partners wrapped them in <a>.
   Anchors are normalized site-wide in the markup; this simply
   keeps their hover state identical to every other icon button. */
.icons a{
    display:inline-flex;
}

.icons a i{
    width:50px;
    height:50px;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    background:var(--light);
    border:1px solid rgba(212,175,55,.2);
    color:white;
    font-size:20px;
    transition:.35s;
}

.icons a:hover i{
    background:var(--secondary);
    color:#222;
    transform:translateY(-5px);
}

/* 7.10 — Product filter tabs: active/hover state timing aligned
   with the rest of the button family */
.filter-btn{
    transition:background .35s ease, color .35s ease, border-color .35s ease, transform .35s ease;
}

/* 7.11 — Location & domain card icon backgrounds shared the same
   gold tone as the rest of the palette but with mismatched blur;
   tidied their edges so they read as one family */
.location-card-icon{
    box-shadow:0 0 0 4px rgba(212,175,55,.06);
}

/* 7.12 — Modal used a flat fade only; matched entrance easing to
   the rest of the site's cubic-bezier reveal for consistency */
.modal-content{
    animation:zoomIn .4s cubic-bezier(.2,.7,.3,1);
}

/* 7.13 — Form field radius/family aligned with card radius scale */
.card form input,
.card form textarea{
    border-radius:12px;
}

/* 7.14 — Back-button and view-page-btn arrows/hover consistent
   translate distance (was 6px vs 4px vs 5px across variants) */
.back-btn:hover{
    transform:translateX(-6px);
}

.view-page-btn:hover,
.visit-btn:hover{
    transform:translateY(-4px);
}

/* 7.15 — Ensure every full-bleed image-backed section keeps the
   same dark overlay depth so photo sections don't feel darker or
   lighter than one another (why-section vs page-banner vs cta) */
.overlay2{
    background:rgba(15,17,23,.82);
}

.page-banner::before{
    background:rgba(10,12,17,.62);
}

.cta::before{
    opacity:.1;
}

/* 7.16 — Unified paragraph line-height rhythm across content
   blocks (30 / 32 / 34px scattered across near-identical text) */
.content-section p,
.card p,
.info-card p,
.why-left p{
    line-height:32px;
}

/* 7.17 — Footer link hover distance unified with nav-link family */
.footer-links a:hover{
    transform:translateX(6px);
}

/* 7.18 — Consistent gap rhythm for card grids site-wide */
.about-grid,
.partner-grid,
.product-grid,
.domain-grid,
.products-home-grid{
    row-gap:40px;
}

/* 7.19 — Prevent the drone/hero art from ever overlapping nav
   on short viewports (visual hierarchy safeguard) */
@media(max-width:992px){
    .hero{
        padding-top:150px;
    }
    .company{
        margin-top:0;
        padding-top:55px;
    }
}

@media(max-width:768px){
    .company{
        margin-top:0;
        padding-top:45px;
    }
    .bg-grid{
        background-size:48px 48px;
    }
    .bg-glow{
        filter:blur(70px);
    }
}

/* 7.20 — Section title top padding rhythm tightened slightly so
   every interior page opens with the same breathing room under
   its page-banner, rather than varying with content length */
.content-section{
    padding-top:90px;
}

/* 7.21 — Ensure images inside cards never crush on narrow cards */
.partner-card img{
    max-width:100%;
}

/* 7.22 — Filter tabs active state focus-safe contrast */
.filter-btn.active{
    box-shadow:0 8px 20px rgba(212,175,55,.25);
}

/* ----------------------------------------------------------
   8. "INNOVATION STARTS HERE" — sits clearly below the hero
   fold now (no more negative margin pulling it up into view
   before the user scrolls), with a touch of extra breathing
   room above the heading itself.
---------------------------------------------------------- */
.company .section-title{
    padding-top:15px;
}

/* ----------------------------------------------------------
   9. HERO BACKGROUND SLIDESHOW
   Fills the entire hero edge-to-edge with the 8 real company
   photos, cross-fading one at a time every ~4s behind the
   heading and text, looping infinitely.
---------------------------------------------------------- */

.hero-split-bg{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:1;
    overflow:hidden;
}

.hero-split-bg::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:2;
    background:linear-gradient(100deg, rgba(12,14,19,.9) 0%, rgba(12,14,19,.68) 40%, rgba(12,14,19,.4) 70%, rgba(12,14,19,.55) 100%);
}

.hero-split-bg img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    opacity:0;
    filter:saturate(.85) brightness(.7);
    animation:heroSplitFade 68s ease-in-out infinite;
}

.hero-split-bg img:nth-child(1){animation-delay:0s;}
.hero-split-bg img:nth-child(2){animation-delay:4s;}
.hero-split-bg img:nth-child(3){animation-delay:8s;}
.hero-split-bg img:nth-child(4){animation-delay:12s;}
.hero-split-bg img:nth-child(5){animation-delay:16s;}
.hero-split-bg img:nth-child(6){animation-delay:20s;}
.hero-split-bg img:nth-child(7){animation-delay:24s;}
.hero-split-bg img:nth-child(8){animation-delay:28s;}
.hero-split-bg img:nth-child(9){animation-delay:32s;}
.hero-split-bg img:nth-child(10){animation-delay:36s;}
.hero-split-bg img:nth-child(11){animation-delay:40s;}
.hero-split-bg img:nth-child(12){animation-delay:44s;}
.hero-split-bg img:nth-child(13){animation-delay:48s;}
.hero-split-bg img:nth-child(14){animation-delay:52s;}
.hero-split-bg img:nth-child(15){animation-delay:56s;}
.hero-split-bg img:nth-child(16){animation-delay:60s;}
.hero-split-bg img:nth-child(17){animation-delay:64s;}

@keyframes heroSplitFade{
    0%{opacity:0;}
    1%{opacity:1;}
    5%{opacity:1;}
    5.9%{opacity:0;}
    100%{opacity:0;}
}

/* Hero is now a single column of text over the full-bleed
   backdrop, so keep the copy at a readable width */
.hero-flex{
    grid-template-columns:1fr;
}

.hero-content{
    max-width:680px;
}

/* ----------------------------------------------------------
   10. ABOUT PAGE — "Why Choose Titanno" card alignment
   The three cards (Vision / Innovation / Global Impact) held
   different amounts of text, so their bottoms didn't line up.
   Stretch them to equal height and let the copy fill the space
   evenly so every card's edges align in the row.
---------------------------------------------------------- */
.services .container{
    align-items:stretch;
}

.services .card{
    display:flex;
    flex-direction:column;
    height:100%;
}

.services .card h3{
    margin-bottom:16px;
}

.services .card p,
.services .card ul{
    flex-grow:1;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

/* ----------------------------------------------------------
   11. PARTNERS — 4 cards per row, remaining row centered
   (previously used responsive auto-fit which left the final
   row of 3 cards flush-left instead of centered)
---------------------------------------------------------- */
.partner-grid{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:35px;
}

.partner-card{
    flex:0 1 calc(25% - 26.25px);
    max-width:calc(25% - 26.25px);
}

@media(max-width:992px){
    .partner-card{
        flex:0 1 calc(50% - 17.5px);
        max-width:calc(50% - 17.5px);
    }
}

@media(max-width:576px){
    .partner-card{
        flex:0 1 100%;
        max-width:100%;
    }
}

/* ----------------------------------------------------------
   13. PARTNER CARDS — identical size everywhere + frosted
   glass background (transparent + blurred) instead of the
   solid light panel, so the dark backdrop shows through softly.
---------------------------------------------------------- */
.partner-card{
    min-height:320px;
    background:rgba(238,240,244,.55);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    border:1px solid rgba(255,255,255,.35);
}

.partner-card:hover{
    background:rgba(238,240,244,.68);
}

/* ----------------------------------------------------------
   12. SITE-WIDE TYPEFACE — switched to Times New Roman for a
   more formal, mature look, replacing Poppins everywhere
   (body copy, nav, buttons, forms, logo text, filter tabs).
---------------------------------------------------------- */
body,
.logo-text,
.filter-btn,
.hero-btn,
.view-product,
.card form input,
.card form textarea{
    font-family:'Times New Roman', Times, serif;
}