/* ============================================================
   APP Insurance — Visual Enhancements
   Patterns · Illustrations · SVG backgrounds · Animations
   ============================================================ */

/* ---------- Wave dividers ---------- */
.wave-divider { line-height: 0; overflow: hidden; }
.wave-divider svg { display: block; width: 100%; }

/* ---------- Hero visual overhaul — real photo background ---------- */
.hero {
    background-image:
        url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='15' cy='15' r='1.2' fill='rgba(255,255,255,0.045)'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 80L80 0' stroke='rgba(255,255,255,0.02)' stroke-width='1' fill='none'/%3E%3C/svg%3E"),
        radial-gradient(ellipse 60% 70% at 75% 25%, rgba(46,134,222,.20) 0%, transparent 60%),
        radial-gradient(ellipse 50% 55% at 10% 75%, rgba(232,137,26,.12) 0%, transparent 55%),
        linear-gradient(135deg, rgba(10,37,64,.93) 0%, rgba(16,55,102,.88) 55%, rgba(26,95,168,.84) 100%),
        url('https://images.unsplash.com/photo-1759272840712-c7e5ea852367?auto=format&fit=crop&w=1920&q=80');
    background-size: 30px 30px, 80px 80px, 100%, 100%, 100%, cover;
    background-position: left top, left top, center, center, center, center;
    background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat, no-repeat;
}

/* Floating shape orbs */
.hero-orbs {
    position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0;
}
.orb {
    position: absolute;
    border-radius: 50%;
    animation: float-orb 18s ease-in-out infinite;
}
.orb-1 {
    width: 480px; height: 480px;
    background: radial-gradient(circle, rgba(46,134,222,.13) 0%, transparent 65%);
    top: -120px; right: -80px;
    animation-delay: 0s;
}
.orb-2 {
    width: 320px; height: 320px;
    background: radial-gradient(circle, rgba(232,137,26,.09) 0%, transparent 65%);
    bottom: -60px; left: 5%;
    animation-delay: -7s;
}
.orb-3 {
    width: 200px; height: 200px;
    border: 1.5px solid rgba(255,255,255,.07);
    top: 35%; right: 28%;
    animation-delay: -3s; animation-duration: 22s;
}
.orb-4 {
    width: 100px; height: 100px;
    border: 1px solid rgba(255,255,255,.06);
    top: 15%; right: 42%;
    animation-delay: -11s; animation-duration: 16s;
}
@keyframes float-orb {
    0%,100% { transform: translateY(0) rotate(0deg); }
    33%      { transform: translateY(-18px) rotate(3deg); }
    66%      { transform: translateY(10px) rotate(-2deg); }
}

/* ---------- Hero ship illustration panel ---------- */
.hero-visual {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.hero-ship-card {
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 20px;
    padding: 1.75rem 1.5rem 1.25rem;
    backdrop-filter: blur(10px);
    overflow: hidden;
    position: relative;
}
.hero-ship-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--amber), var(--blue-light), var(--amber));
    background-size: 200% 100%;
    animation: shimmer 3s linear infinite;
}
@keyframes shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
.hero-ship-card svg { width: 100%; height: auto; }
.hero-ship-card .ship-label {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: .75rem; padding-top: .75rem; border-top: 1px solid rgba(255,255,255,.12);
    font-size: .78rem; color: rgba(255,255,255,.65);
}
.ship-status-dot {
    display: inline-flex; align-items: center; gap: .35rem;
}
.ship-status-dot::before {
    content: '';
    display: inline-block; width: 7px; height: 7px;
    background: #4ade80; border-radius: 50%;
    animation: pulse-green 2s ease-in-out infinite;
}
@keyframes pulse-green {
    0%,100% { box-shadow: 0 0 0 0 rgba(74,222,128,.5); }
    50%      { box-shadow: 0 0 0 5px rgba(74,222,128,0); }
}

/* ---------- Hero tracking card ---------- */
.hero-tracking-card {
    background: #fff;
    border-radius: 16px;
    padding: 1.35rem 1.5rem;
    box-shadow: 0 20px 50px rgba(0,0,0,.25);
    position: relative;
}
.hero-tracking-card::after {
    content: '';
    position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%);
    width: 80%; height: 8px;
    background: rgba(0,0,0,.12); border-radius: 0 0 8px 8px;
    filter: blur(6px);
}

/* ---------- Stats strip — visual upgrade ---------- */
.stats-strip {
    background:
        url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='20' cy='20' r='1' fill='rgba(255,255,255,0.04)'/%3E%3C/svg%3E"),
        linear-gradient(135deg, #071d2e 0%, #0A2540 50%, #0d2e4e 100%);
    background-size: 40px 40px, 100%;
    position: relative;
}
.stats-strip::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--amber), transparent);
}
.stats-strip .stat-divider {
    width: 1px; background: rgba(255,255,255,.1); margin: .5rem 0; align-self: stretch;
}
.stats-strip .stat-item {
    position: relative;
}
.stats-strip .stat-item .stat-icon {
    font-size: 1.2rem; color: rgba(255,255,255,.15);
    margin-bottom: .3rem;
}

/* ---------- Service cards — accent stripe ---------- */
.service-card { position: relative; overflow: hidden; }
.service-card::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0;
    height: 4px;
    border-radius: 16px 16px 0 0;
    opacity: 0;
    transition: opacity .3s;
}
.service-card:hover::before { opacity: 1; }
.service-card:nth-child(1)::before { background: linear-gradient(90deg,#1A6BB5,#2E86DE); }
.service-card:nth-child(2)::before { background: linear-gradient(90deg,#0E8A60,#27AE60); }
.service-card:nth-child(3)::before { background: linear-gradient(90deg,#6C35B5,#9B59B6); }
.service-card:nth-child(4)::before { background: linear-gradient(90deg,#E8891A,#F5A03B); }
.service-card:nth-child(5)::before { background: linear-gradient(90deg,#0E7D8A,#1ABC9C); }
.service-card:nth-child(6)::before { background: linear-gradient(90deg,#C0392B,#E74C3C); }

/* Coloured icon backgrounds per service type */
.service-card:nth-child(1) .icon-wrap { background: linear-gradient(135deg,#0d4e8c,#1A6BB5); }
.service-card:nth-child(2) .icon-wrap { background: linear-gradient(135deg,#0a6647,#0E8A60); }
.service-card:nth-child(3) .icon-wrap { background: linear-gradient(135deg,#4a2080,#6C35B5); }
.service-card:nth-child(4) .icon-wrap { background: linear-gradient(135deg,#a85c00,#E8891A); }
.service-card:nth-child(5) .icon-wrap { background: linear-gradient(135deg,#085e6a,#0E7D8A); }
.service-card:nth-child(6) .icon-wrap { background: linear-gradient(135deg,#8e1b13,#C0392B); }

/* Card subtle pattern background */
.service-card {
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='.75' fill='rgba(0,0,0,0.018)'/%3E%3C/svg%3E"), #fff;
    background-size: 20px 20px, 100%;
}

/* ---------- Why-panel — Sydney Harbour Bridge photo background ---------- */
.why-image-panel {
    position: relative;
    overflow: hidden;
    background-image:
        linear-gradient(135deg, rgba(10,37,64,.91) 0%, rgba(16,55,102,.86) 100%),
        url('https://images.unsplash.com/photo-1514294393539-47d3b28b819d?auto=format&fit=crop&w=900&q=80');
    background-size: 100%, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
}
.why-image-panel::after {
    content: '';
    position: absolute;
    right: -30px; bottom: -30px;
    width: 260px; height: 260px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath fill='rgba(255,255,255,0.04)' d='M40,80 L55,60 L70,55 L90,45 L110,42 L130,45 L148,50 L160,62 L165,75 L160,90 L150,105 L140,118 L145,130 L140,145 L130,158 L120,165 L108,168 L95,165 L85,160 L75,150 L68,138 L60,130 L50,125 L42,115 L35,100 Z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    opacity: .6;
    pointer-events: none;
}

/* ---------- Credential accent dot ---------- */
.cert-item { position: relative; }
.cert-item::before {
    content: '';
    position: absolute; left: -1px; top: 50%; transform: translateY(-50%);
    width: 3px; height: 40%; background: var(--amber); border-radius: 2px;
    opacity: 0; transition: opacity .2s;
}
.cert-item:hover::before { opacity: 1; }

/* ---------- Testimonials — quote marks ---------- */
.testimonial-card {
    position: relative;
    overflow: hidden;
}
.testimonial-card::before {
    content: '\201C';
    position: absolute; top: -10px; left: 12px;
    font-size: 7rem; font-family: Georgia, serif; line-height: 1;
    color: var(--navy); opacity: .055;
    pointer-events: none;
    user-select: none;
}
.testimonial-card .stars { font-size: 1rem; letter-spacing: .15em; }
.testimonial-card blockquote { position: relative; z-index: 1; }

/* ---------- CTA banner — pattern + wave ---------- */
.cta-banner {
    position: relative;
    overflow: hidden;
    background:
        url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 60L60 0M-10 10L10 -10M50 70L70 50' stroke='rgba(255,255,255,0.06)' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"),
        linear-gradient(135deg, #c97010 0%, var(--amber) 50%, #e09618 100%);
    background-size: 60px 60px, 100%;
}
.cta-banner::before {
    content: '';
    position: absolute;
    top: -60px; right: -60px;
    width: 320px; height: 320px;
    background: radial-gradient(circle, rgba(255,255,255,.12) 0%, transparent 65%);
    pointer-events: none;
}
.cta-banner::after {
    content: '';
    position: absolute;
    bottom: -60px; left: 10%;
    width: 220px; height: 220px;
    background: radial-gradient(circle, rgba(0,0,0,.1) 0%, transparent 65%);
    pointer-events: none;
}
.cta-banner > * { position: relative; z-index: 1; }

/* ---------- Page hero — base (inner pages) ---------- */
.page-hero {
    position: relative;
    background-image:
        url("data:image/svg+xml,%3Csvg width='50' height='50' viewBox='0 0 50 50' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='25' cy='25' r='1' fill='rgba(255,255,255,0.05)'/%3E%3C/svg%3E"),
        linear-gradient(135deg, rgba(7,29,46,.96) 0%, rgba(10,37,64,.95) 60%, rgba(16,55,102,.94) 100%);
    background-size: 50px 50px, 100%;
    overflow: hidden;
}

/* Tracking page hero — cargo ship photo */
.page-hero-tracking-bg {
    background-image:
        url("data:image/svg+xml,%3Csvg width='50' height='50' viewBox='0 0 50 50' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='25' cy='25' r='1' fill='rgba(255,255,255,0.045)'/%3E%3C/svg%3E"),
        linear-gradient(135deg, rgba(7,29,46,.88) 0%, rgba(10,37,64,.84) 50%, rgba(16,55,102,.80) 100%),
        url('https://images.unsplash.com/photo-1617952739760-1dcae19a1d93?auto=format&fit=crop&w=1920&q=80');
    background-size: 50px 50px, 100%, cover;
    background-position: left top, center, center;
    background-repeat: repeat, no-repeat, no-repeat;
}

/* Contact page hero — Sydney Harbour panoramic */
.page-hero-sydney-bg {
    background-image:
        url("data:image/svg+xml,%3Csvg width='50' height='50' viewBox='0 0 50 50' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='25' cy='25' r='1' fill='rgba(255,255,255,0.045)'/%3E%3C/svg%3E"),
        linear-gradient(135deg, rgba(7,29,46,.88) 0%, rgba(10,37,64,.84) 50%, rgba(16,55,102,.80) 100%),
        url('https://images.unsplash.com/photo-1544698202-afeeb997d98c?auto=format&fit=crop&w=1920&q=80');
    background-size: 50px 50px, 100%, cover;
    background-position: left top, center, center 30%;
    background-repeat: repeat, no-repeat, no-repeat;
}

/* Services page hero — aerial containers photo */
.page-hero-services-bg {
    background-image:
        url("data:image/svg+xml,%3Csvg width='50' height='50' viewBox='0 0 50 50' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='25' cy='25' r='1' fill='rgba(255,255,255,0.045)'/%3E%3C/svg%3E"),
        linear-gradient(135deg, rgba(7,29,46,.90) 0%, rgba(10,37,64,.86) 50%, rgba(16,55,102,.82) 100%),
        url('https://images.unsplash.com/photo-1640529494825-4add7eed660e?auto=format&fit=crop&w=1920&q=80');
    background-size: 50px 50px, 100%, cover;
    background-position: left top, center, center;
    background-repeat: repeat, no-repeat, no-repeat;
}

/* Quote page hero — professional business */
.page-hero-quote-bg {
    background-image:
        url("data:image/svg+xml,%3Csvg width='50' height='50' viewBox='0 0 50 50' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='25' cy='25' r='1' fill='rgba(255,255,255,0.045)'/%3E%3C/svg%3E"),
        linear-gradient(135deg, rgba(7,29,46,.90) 0%, rgba(10,37,64,.86) 50%, rgba(16,55,102,.82) 100%),
        url('https://images.unsplash.com/photo-1758691736424-4b4273948341?auto=format&fit=crop&w=1920&q=80');
    background-size: 50px 50px, 100%, cover;
    background-position: left top, center, center;
    background-repeat: repeat, no-repeat, no-repeat;
}
.page-hero-orb {
    position: absolute;
    pointer-events: none; z-index: 0;
}
.page-hero-orb-1 {
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(46,134,222,.14) 0%, transparent 60%);
    top: -150px; right: -100px;
    border-radius: 50%;
}
.page-hero-orb-2 {
    width: 250px; height: 250px;
    background: radial-gradient(circle, rgba(232,137,26,.1) 0%, transparent 60%);
    bottom: -80px; left: 8%;
    border-radius: 50%;
}
.page-hero .container { position: relative; z-index: 1; }

/* ---------- Tracking page — world map grid ---------- */
.tracking-hero-map {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
    opacity: .55;
}
.tracking-hero-map svg { width: 100%; height: 100%; }

/* Port ping animation */
.port-ping {
    animation: port-pulse 2.5s ease-in-out infinite;
}
@keyframes port-pulse {
    0%,100% { opacity: 1; r: 4; }
    50%      { opacity: .4; r: 7; }
}
.port-ring {
    animation: port-ring-expand 2.5s ease-out infinite;
}
@keyframes port-ring-expand {
    0%   { r: 6; opacity: .7; stroke-width: 1.5; }
    100% { r: 18; opacity: 0; stroke-width: .5; }
}

/* ---------- Tracking page ship illustration ---------- */
.ship-illustration {
    max-width: 420px;
    margin: 2rem auto 0;
    opacity: .85;
}

/* ---------- Container tracking — live indicator ---------- */
.live-dot {
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: .78rem; font-weight: 700;
    color: #4ade80; text-transform: uppercase; letter-spacing: .08em;
}
.live-dot::before {
    content: '';
    width: 7px; height: 7px; background: #4ade80; border-radius: 50%;
    animation: pulse-green 1.8s ease-in-out infinite;
}

/* ---------- Section dividers (diagonal clips) ---------- */
.section-angled {
    clip-path: polygon(0 3%, 100% 0, 100% 97%, 0 100%);
    margin: -2rem 0;
    padding: 8rem 0;
}

/* ---------- Services page — card headers ---------- */
.service-full-card .card-header {
    position: relative;
    overflow: hidden;
}
.service-full-card .card-header::after {
    content: '';
    position: absolute;
    top: -50%; right: -10%;
    width: 220px; height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.06) 0%, transparent 60%);
    pointer-events: none;
}
.service-full-card:nth-child(2) .card-header { background: linear-gradient(135deg, #0a4d30, #0E8A60); }
.service-full-card:nth-child(3) .card-header { background: linear-gradient(135deg, #3d1580, #6C35B5); }
.service-full-card:nth-child(4) .card-header { background: linear-gradient(135deg, #7a3a00, #bf6a00); }
.service-full-card:nth-child(5) .card-header { background: linear-gradient(135deg, #055060, #0E7D8A); }
.service-full-card:nth-child(6) .card-header { background: linear-gradient(135deg, #6b1410, #C0392B); }

/* ---------- Section backgrounds with texture ---------- */
.section-textured {
    background:
        url("data:image/svg+xml,%3Csvg width='60' height='104' viewBox='0 0 60 104' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 10L55 25V55L30 70L5 55V25Z' fill='none' stroke='rgba(10,37,64,0.04)' stroke-width='1'/%3E%3C/svg%3E"),
        #F0F4F8;
    background-size: 60px 104px, 100%;
}

/* ---------- Floating port map on tracking promo ---------- */
.world-dots-bg {
    position: absolute;
    inset: 0; pointer-events: none; z-index: 0;
    overflow: hidden;
}

/* ---------- Stats number counter visual ---------- */
.stat-item .num {
    background: linear-gradient(135deg, #fff, rgba(255,255,255,.75));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.stat-item .num span {
    background: linear-gradient(135deg, var(--amber), #F5A03B);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ---------- Misc helpers ---------- */
.text-gradient {
    background: linear-gradient(135deg, var(--blue), var(--blue-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.border-accent {
    border-left: 4px solid var(--amber);
    padding-left: 1rem;
}

/* ---------- Footer top accent ---------- */
.footer {
    border-top: 3px solid transparent;
    border-image: linear-gradient(90deg, transparent 0%, var(--amber) 30%, var(--blue-light) 70%, transparent 100%) 1;
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
    /* Hide heavy visual elements on mobile */
    .hero-ship-card { display: none; }
    .orb-3, .orb-4 { display: none; }
    .hero::after { display: none; }
    .tracking-hero-map { opacity: .3; }

    /* Scale down orbs to prevent horizontal overflow */
    .orb-1 { width: 280px; height: 280px; top: -80px; right: -60px; }
    .orb-2 { width: 180px; height: 180px; }

    /* Scale down page-hero orbs */
    .page-hero-orb-1 { width: 280px; height: 280px; top: -80px; right: -60px; }
    .page-hero-orb-2 { width: 140px; height: 140px; }
}

@media (max-width: 480px) {
    .orb-1, .orb-2 { display: none; }
    .page-hero-orb-1 { display: none; }
    .page-hero-orb-2 { width: 120px; height: 120px; }

    /* Keep world map but more subtle */
    .tracking-hero-map { opacity: .18; }

    /* Stats gradient text still legible at small size */
    .stat-item .num { font-size: 1.8rem; }
}