/*
 * VERBATIM copy of the three <style> blocks in faithfuture/resources/views/layouts/site.blade.php
 * (lines 199-374). Only the first block's leading ':root { --ffs-h1 ... }' rule is NOT here,
 * because its values come from SiteSetting (size_h1..size_span); it is rendered inline by
 * src/components/layout/SiteHead.tsx right before this stylesheet, preserving the original order.
 * Do not edit by hand - keep in sync with the Blade layout.
 */
/* ---- <style> block 1 (site.blade.php:199) ---- */
        .ffs-size-h1 { font-size: var(--ffs-h1); }
        .ffs-size-h2 { font-size: var(--ffs-h2); }
        .ffs-size-h3 { font-size: var(--ffs-h3); }
        .ffs-size-h4 { font-size: var(--ffs-h4); }
        .ffs-size-h5 { font-size: var(--ffs-h5); }
        .ffs-size-h6 { font-size: var(--ffs-h6); }
        .ffs-size-p { font-size: var(--ffs-p); }
        .ffs-size-span { font-size: var(--ffs-span); }
        .reveal { opacity: 0; transform: translateY(20px); transition: all 0.8s ease-out; }
        .reveal.active { opacity: 1; transform: translateY(0); }
        .glow-hover:hover { box-shadow: 0 0 20px rgba(37, 99, 255, 0.4); border-color: rgba(37, 99, 255, 0.5); }

        .shiny-text {
            color: #64CEFB;
            background: linear-gradient(
                90deg,
                rgba(100, 206, 251, 0) 0%,
                rgba(255, 255, 255, 0.8) 50%,
                rgba(100, 206, 251, 0) 100%
            );
            background-size: 200% 100%;
            -webkit-background-clip: text;
            background-clip: text;
            display: inline-block;
            animation: shine-sweep 3s linear infinite;
        }

        @keyframes shine-sweep {
            0% { background-position: -200% 0; }
            100% { background-position: 200% 0; }
        }

        .masonry-grid { column-count: 1; column-gap: 1.5rem; }
        .globe_wrap { text-align: center; height: 120vh; position: relative; overflow: clip; }
        .globe_contain { flex-flow: column; justify-content: flex-end; height: 100vh; display: flex; position: sticky; top: 0; overflow: hidden; }
        .globe_headline { z-index: 1; height: 90%; padding-top: 12rem; position: absolute; inset: 0% 0% auto; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; }
        .globe_heading_wrap { max-width: 800px; margin: 0 auto; padding: 0 1.25rem; }
        .globe_label { font-family: 'Hanken Grotesk', sans-serif; font-size: 12px; line-height: 1; letter-spacing: 0.1em; font-weight: 700; color: #2563ff; text-transform: uppercase; display: block; margin-bottom: 1rem; }
        .globe_image-wrapper { z-index: 2; flex-flow: column; justify-content: flex-start; align-items: center; height: 65%; display: flex; position: sticky; bottom: 0; overflow: visible; }
        .globe_image { pointer-events: none; width: 100%; margin-top: -7%; max-width: 2560px; position: relative; z-index: 5; }
        .globe_image svg, .globe_image lottie-player { width: 100%; height: auto; }
        .globe_border { aspect-ratio: 1/1; border: 1px dashed rgba(37,99,255,0.3); border-radius: 50%; justify-content: center; align-items: center; width: 172%; margin-top: 6%; display: flex; position: absolute; inset: 0% auto auto; opacity: 1; z-index: 10; will-change: opacity; transition: opacity 0.6s ease; }
        .globe_point_wrap { justify-content: center; align-items: flex-start; width: 0; height: 100%; display: flex; position: absolute; top: 0%; }
        .globe_point { width: 1rem; height: 1rem; min-height: 1rem; min-width: 1rem; background-color: #2563ff; border-radius: 50%; position: absolute; top: -0.5rem; box-shadow: 0 0 10px rgba(37,99,255,0.5); }
        .globe_point_text { top: 1.5rem; position: absolute; white-space: nowrap; font-size: 0.875rem; font-family: 'Hanken Grotesk', sans-serif; font-weight: 700; color: #e5e2e1; letter-spacing: 0.02em; }
        .globe_point_sub { top: 2.75rem; position: absolute; white-space: nowrap; font-size: 0.65rem; font-family: 'Hanken Grotesk', sans-serif; font-weight: 400; color: rgba(229,226,225,0.6); letter-spacing: 0.04em; }
        .globe_gradient { background-image: linear-gradient(rgba(19,19,19,0), rgba(19,19,19,1)); width: 100%; height: 50%; position: absolute; inset: auto 0% 0%; pointer-events: none; }
        .globe_heading { font-family: 'Sora', sans-serif; font-size: 40px; line-height: 1.2; font-weight: 600; color: #fff; margin: 0; min-height: 1.2em; }
        .globe_heading .u-span-no-wrap { white-space: nowrap; }
        .typewriter-cursor { animation: blink 0.8s step-end infinite; color: #2563ff; font-weight: 100; }
        @keyframes blink { 50% { opacity: 0; } }
        .feature-card { opacity: 0; transform: translateY(40px); transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1); perspective: 800px; }
        .feature-card:nth-child(1) { transition-delay: 0ms; }
        .feature-card:nth-child(2) { transition-delay: 120ms; }
        .feature-card:nth-child(3) { transition-delay: 240ms; }
        .feature-card:nth-child(4) { transition-delay: 360ms; }
        .feature-card:nth-child(5) { transition-delay: 480ms; }
        .feature-card.active { opacity: 1; transform: translateY(0); }
        .feature-card .feature-border { transition: transform 0.5s cubic-bezier(0.16,1,0.3,1), box-shadow 0.5s ease; box-shadow: 0 30px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.05); }
        .feature-card h3 { transition: color 0.3s ease; }
        .feature-card:hover .feature-border { transform: perspective(800px) rotateY(-2deg) scale(1.03); box-shadow: 0 40px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.1); }
        .feature-card:hover h3 { color: #64CEFB; }
        .feature-scroll-track { will-change: transform; }
        .feature-scroll-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
        .about-card { opacity: 0; transform: translateY(40px); transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1); }
        .about-card:nth-child(1) { transition-delay: 100ms; }
        .about-card:nth-child(2) { transition-delay: 300ms; }
        .about-card:nth-child(3) { transition-delay: 500ms; }
        .about-card.active { opacity: 1; transform: translateY(0); }
        .about-card:hover { transform: scale(1.02) translateY(-4px); }
        .stats-typewriter span { display: inline-block; }
        .stats-video-mask { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='m53.54,45.42c2.19-3.79,7.67-3.79,9.86,0l4.54,7.87c1.17,2.02,1.17,4.51,0,6.54l-8.15,13.81c-1.68,2.91.42,6.55,3.78,6.55h17.81c3.45,0,5.61-3.74,3.89-6.73l-28.76-49.81c-2.95-5.12-10.34-5.12-13.29,0l-28.46,49.3c-1.86,3.22.46,7.24,4.18,7.24h10.23c2.55,0,4.91-1.36,6.19-3.57l18.18-31.19Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='m53.54,45.42c2.19-3.79,7.67-3.79,9.86,0l4.54,7.87c1.17,2.02,1.17,4.51,0,6.54l-8.15,13.81c-1.68,2.91.42,6.55,3.78,6.55h17.81c3.45,0,5.61-3.74,3.89-6.73l-28.76-49.81c-2.95-5.12-10.34-5.12-13.29,0l-28.46,49.3c-1.86,3.22.46,7.24,4.18,7.24h10.23c2.55,0,4.91-1.36,6.19-3.57l18.18-31.19Z'/%3E%3C/svg%3E"); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }

        @media (max-width: 991px) { .globe_headline { height: auto; padding-top: 6rem; position: relative; } .globe_image-wrapper { justify-content: center; width: 100%; height: auto; min-height: 40vh; } .globe_border { margin-top: 4%; width: 140%; } .globe_image { width: 100%; margin-top: 0; } .globe_heading { font-size: 32px; } .globe_wrap { height: auto !important; } .globe_contain { height: auto !important; position: relative !important; flex-flow: column; gap: 2rem; } }
        @media (max-width: 767px) { .globe_headline { padding-top: 5rem; } .globe_image { width: 120%; } .globe_border { width: 180%; margin-top: 7%; } .globe_heading { font-size: 26px; } .globe_image-wrapper { min-height: 35vh; } }
        @media (max-width: 479px) { .globe_headline { padding-top: 3rem; } .globe_image { width: 140%; } .globe_border { width: 176%; margin-top: 9%; } .globe_point { width: 0.75rem; height: 0.75rem; min-height: 0.75rem; min-width: 0.75rem; } .globe_point_text { font-size: 0.75rem; } .globe_point_sub { font-size: 0.55rem; bottom: -3rem; } .globe_heading { font-size: 20px; } .globe_image-wrapper { min-height: 30vh; } }
        @media (min-width: 768px) { .masonry-grid { column-count: 2; } }
        @media (min-width: 1024px) { .masonry-grid { column-count: 3; } }
        .masonry-item { break-inside: avoid; margin-bottom: 1.5rem; }
        .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }

        .faq-item[open] summary .expand-icon { transform: rotate(180deg); }
        .faq-item summary { list-style: none; }
        .faq-item summary::-webkit-details-marker { display: none; }

        .font-firs { font-family: 'Sora', 'Inter', system-ui, sans-serif; letter-spacing: -0.01em; }
        input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, textarea:-webkit-autofill, textarea:-webkit-autofill:hover, textarea:-webkit-autofill:focus, select:-webkit-autofill, select:-webkit-autofill:hover, select:-webkit-autofill:focus {
            -webkit-text-fill-color: #e5e2e1;
            -webkit-box-shadow: 0 0 0px 1000px #1A1A1A inset;
            box-shadow: 0 0 0px 1000px #1A1A1A inset;
            transition: background-color 600000s 0s;
            caret-color: #fff;
        }
        .stat-gradient { background: linear-gradient(294deg, #64CEFB 20%, #2563ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
        .stat-value-white { color: #ffffff; }
        .about-card { opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; }
        .about-card.revealed { opacity: 1; transform: translateY(0); }
        .about-card .count-up { display: inline; }
        .about-card .count-label { display: inline; }
        .card-chamfer-1 { clip-path: polygon(64px 0, calc(100% - 14px) 0, calc(100% - 4px) 4px, 100% 14px, 100% calc(100% - 14px), calc(100% - 4px) calc(100% - 4px), calc(100% - 14px) 100%, 14px 100%, 4px calc(100% - 4px), 0 calc(100% - 14px), 0 64px); }
        .card-chamfer-2 { clip-path: polygon(0 14px, 4px 4px, 14px 0, calc(100% - 64px) 0, 100% 64px, 100% calc(100% - 14px), calc(100% - 4px) calc(100% - 4px), calc(100% - 14px) 100%, 64px 100%, 0 calc(100% - 64px)); }
        .card-chamfer-3 { clip-path: polygon(0 14px, 4px 4px, 14px 0, calc(100% - 64px) 0, 100% 64px, 100% calc(100% - 64px), calc(100% - 64px) 100%, 14px 100%, 4px calc(100% - 4px), 0 calc(100% - 14px)); }
        .group:hover .group-hover\:-translate-y-0_5 { transform: translateY(-2px); }
        #about a:hover span { transform: translateY(-2px); }
        .c5-animated-gradient {
          background-color: #ff8e53;
          background-image:
            radial-gradient(circle at var(--c5-x1) var(--c5-y1), #fff1aa 0px, transparent var(--c5-s1)),
            radial-gradient(circle at var(--c5-x2) var(--c5-y2), #ff4b2b 0px, transparent var(--c5-s2)),
            radial-gradient(circle at var(--c5-x3) var(--c5-y3), #8aff8a 0px, transparent var(--c5-s3)),
            radial-gradient(circle at var(--c5-x4) var(--c5-y4), #ffd000 0px, transparent var(--c5-s4)),
            radial-gradient(circle at var(--c5-x5) var(--c5-y5), #ff1493 0px, transparent var(--c5-s5));
          animation:
            c5-blob1 5s ease-in-out infinite,
            c5-blob2 6s ease-in-out infinite,
            c5-blob3 5.5s ease-in-out infinite,
            c5-blob4 6.5s ease-in-out infinite,
            c5-blob5 4s ease-in-out infinite,
            c5-size1 3.5s ease-in-out infinite,
            c5-size2 4.2s ease-in-out infinite,
            c5-size3 3.8s ease-in-out infinite,
            c5-size4 4.6s ease-in-out infinite,
            c5-size5 3s ease-in-out infinite;
        }
        .faq-toggle { cursor: pointer; user-select: none; }
        .faq-toggle.open + .faq-answer { display: block; }
        .faq-answer { display: none; }
        @media (prefers-reduced-motion: reduce) {
          .c5-animated-gradient { animation: none; }
        }
/* ---- <style> block 2 (site.blade.php:341) ---- */
        @property --c5-x1 { syntax: '<percentage>'; inherits: false; initial-value: 10%; }
        @property --c5-y1 { syntax: '<percentage>'; inherits: false; initial-value: 10%; }
        @property --c5-x2 { syntax: '<percentage>'; inherits: false; initial-value: 90%; }
        @property --c5-y2 { syntax: '<percentage>'; inherits: false; initial-value: 10%; }
        @property --c5-x3 { syntax: '<percentage>'; inherits: false; initial-value: 10%; }
        @property --c5-y3 { syntax: '<percentage>'; inherits: false; initial-value: 90%; }
        @property --c5-x4 { syntax: '<percentage>'; inherits: false; initial-value: 90%; }
        @property --c5-y4 { syntax: '<percentage>'; inherits: false; initial-value: 90%; }
        @property --c5-x5 { syntax: '<percentage>'; inherits: false; initial-value: 50%; }
        @property --c5-y5 { syntax: '<percentage>'; inherits: false; initial-value: 50%; }
        @property --c5-s1 { syntax: '<percentage>'; inherits: false; initial-value: 55%; }
        @property --c5-s2 { syntax: '<percentage>'; inherits: false; initial-value: 55%; }
        @property --c5-s3 { syntax: '<percentage>'; inherits: false; initial-value: 55%; }
        @property --c5-s4 { syntax: '<percentage>'; inherits: false; initial-value: 55%; }
        @property --c5-s5 { syntax: '<percentage>'; inherits: false; initial-value: 65%; }
        @keyframes c5-blob1 { 0%,100% { --c5-x1: 5%; --c5-y1: 5%; } 25% { --c5-x1: 45%; --c5-y1: 20%; } 50% { --c5-x1: 30%; --c5-y1: 55%; } 75% { --c5-x1: 0%; --c5-y1: 30%; } }
        @keyframes c5-blob2 { 0%,100% { --c5-x2: 95%; --c5-y2: 5%; } 33% { --c5-x2: 55%; --c5-y2: 35%; } 66% { --c5-x2: 80%; --c5-y2: 65%; } }
        @keyframes c5-blob3 { 0%,100% { --c5-x3: 5%; --c5-y3: 95%; } 40% { --c5-x3: 45%; --c5-y3: 65%; } 70% { --c5-x3: 25%; --c5-y3: 100%; } }
        @keyframes c5-blob4 { 0%,100% { --c5-x4: 95%; --c5-y4: 95%; } 30% { --c5-x4: 60%; --c5-y4: 70%; } 60% { --c5-x4: 100%; --c5-y4: 50%; } }
        @keyframes c5-blob5 { 0%,100% { --c5-x5: 50%; --c5-y5: 50%; } 25% { --c5-x5: 70%; --c5-y5: 30%; } 50% { --c5-x5: 40%; --c5-y5: 70%; } 75% { --c5-x5: 30%; --c5-y5: 40%; } }
        @keyframes c5-size1 { 0%,100% { --c5-s1: 45%; } 50% { --c5-s1: 80%; } }
        @keyframes c5-size2 { 0%,100% { --c5-s2: 45%; } 50% { --c5-s2: 85%; } }
        @keyframes c5-size3 { 0%,100% { --c5-s3: 45%; } 50% { --c5-s3: 78%; } }
        @keyframes c5-size4 { 0%,100% { --c5-s4: 45%; } 50% { --c5-s4: 82%; } }
        @keyframes c5-size5 { 0%,100% { --c5-s5: 50%; } 50% { --c5-s5: 85%; } }
/* ---- <style> block 3 (site.blade.php:368) ---- */
        .btn-primary-cat { position: relative; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; }
        .btn-primary-cat::before { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 0%, rgba(0,0,0,0.05) 50%, transparent 100%); transform: translateX(-100%); transition: transform 0.5s ease; }
        .btn-primary-cat:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.15); }
        .btn-primary-cat:hover::before { transform: translateX(100%); }
        .btn-primary-cat:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(0,0,0,0.1); }