/* CSS for index_lost_and_found_newww.html */

/* -- Font Fallback -- */
    @font-face { font-family:'Inter Fallback'; src:local('Arial'); size-adjust:107.64%; ascent-override:90%; descent-override:22.43%; line-gap-override:0%; }
    body,.font-inter { font-family:'Inter','Inter Fallback',system-ui,sans-serif; }

    /* -- Hero -- */
    .hero-section { background:#fff; position:relative; overflow:hidden; }
    .hero-blob { position:absolute; border-radius:50%; filter:blur(100px); opacity:.7; pointer-events:none; z-index:0; }
    .hero-blob-1 { width:500px; height:500px; background:rgba(4,107,252,.3); top:-180px; left:-120px; }
    .hero-blob-2 { width:400px; height:400px; background:rgba(255,153,0,.2); top:40px; right:-80px; }
    .hero-blob-3 { width:350px; height:350px; background:rgba(4,107,252,.2); bottom:-80px; left:30%; }
    @media(max-width:768px){ .hero-blob{opacity:.35;filter:blur(120px)} .hero-blob-1{width:300px;height:300px} .hero-blob-2{width:250px;height:250px} .hero-blob-3{width:220px;height:220px} }
    .hero-content { position:relative; z-index:10; }
    .hero-grid { position:absolute; inset:0; background-image:linear-gradient(rgba(4,107,252,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(4,107,252,.03) 1px,transparent 1px); background-size:60px 60px; pointer-events:none; z-index:1; }

    /* -- Hero Rotating Text -- */
    @keyframes heroTextIn { 0%{opacity:0;transform:translateY(18px)} 100%{opacity:1;transform:translateY(0)} }
    @keyframes heroTextOut { 0%{opacity:1;transform:translateY(0)} 100%{opacity:0;transform:translateY(-18px)} }
    .hero-rotate { display:inline-block; animation:heroTextIn .5s cubic-bezier(.16,1,.3,1) forwards; }
    .hero-rotate.out { animation:heroTextOut .4s cubic-bezier(.7,0,.84,0) forwards; }
    @media(prefers-reduced-motion:reduce){ .hero-rotate,.hero-rotate.out{animation:none!important;opacity:1!important;transform:none!important} }

    /* -- Buttons -- */
    .btn-pill { border-radius:50px; }

    /* -- Accessibility -- */
    .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); clip-path:inset(50%); white-space:nowrap; border-width:0; }
    :focus-visible { outline:2px solid #046bfc; outline-offset:2px; }
    .btn-pill:focus-visible { outline-offset:3px; }
    .btn-pill:active { transform:scale(.97); }

    /* -- Scroll-reveal -- */
    .reveal { opacity:0; transform:translateY(32px); transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1); }
    .reveal-left { opacity:0; transform:translateX(-40px); transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1); }
    .reveal-right { opacity:0; transform:translateX(40px); transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1); }
    .reveal.visible,.reveal-left.visible,.reveal-right.visible { opacity:1; transform:translate(0,0); }
    .reveal-d1{transition-delay:.1s} .reveal-d2{transition-delay:.2s} .reveal-d3{transition-delay:.3s} .reveal-d4{transition-delay:.4s} .reveal-d5{transition-delay:.5s} .reveal-d6{transition-delay:.6s}

    /* -- Fade-in (trust badges) -- */
    .fade { opacity:0; transform:translateY(20px); transition:opacity .8s ease-out,transform .8s ease-out; }
    .fade.visible { opacity:1; transform:translateY(0); }

    /* -- CTA hero pulse -- */
    @keyframes ctaPulse{0%,100%{box-shadow:0 0 0 0 rgba(4,107,252,.45)}70%{box-shadow:0 0 0 10px rgba(4,107,252,0)}}
    .cta-hero-pulse{animation:ctaPulse 2s ease-in-out infinite;animation-play-state:paused}
    .anim-play .cta-hero-pulse{animation-play-state:running}

    /* -- Counter number formatting -- */
    .counter{font-variant-numeric:tabular-nums}

    /* -- Section scroll anchor offset -- */
    section[id]{scroll-margin-top:140px}

    /* -- Section blobs (base) -- */
    .section-blob { position:absolute; border-radius:50%; filter:blur(120px); pointer-events:none; z-index:0; }
    .section-blob-blue { background:rgba(4,107,252,.15); }
    .section-blob-orange { background:rgba(255,153,0,.12); }
    .section-blob-green { background:rgba(16,185,129,.12); }
    .section-blob-violet { background:rgba(139,92,246,.12); }
    .section-blob-amber { background:rgba(245,158,11,.10); }
    .section-blob-cyan { background:rgba(6,182,212,.10); }

    /* -- Base grid utility (must precede responsive overrides) -- */
    .grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
    @media(min-width:640px){.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}}
    @media(min-width:768px){.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:mb-8{margin-bottom:2rem}.md\:mb-14{margin-bottom:3.5rem}.md\:gap-10{gap:2.5rem}.md\:pb-20{padding-bottom:5rem}.md\:pt-20{padding-top:5rem}}

    /* -- Reduced motion -- */
    @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important} .reveal,.reveal-left,.reveal-right,.fade{opacity:1!important;transform:none!important} .cta-hero-pulse{animation:none!important} }
