#global-preloader{ position:fixed; inset:0; z-index:99999; display:flex; flex-direction:column; align-items:center; justify-content:center; background:#FFFFFF; transition:opacity 0.5s ease, visibility 0.5s ease; } body.dark-mode #global-preloader, [data-theme="dark"] #global-preloader{ background:#0A0A0F; } #global-preloader.fade-out{ opacity:0; visibility:hidden; pointer-events:none; } .pl-glow{ position:absolute; width:320px; height:320px; border-radius:50%; background:radial-gradient(circle, var(--brand-orange) 0%, transparent 60%); opacity:0.15; filter:blur(60px); animation:pl-pulse 3s ease-in-out infinite alternate; } body.light-mode .pl-glow, [data-theme="light"] .pl-glow{ opacity:0.10; } .pl-logo{ position:relative; z-index:1; max-width:220px; height:auto; margin-bottom:2rem; animation:pl-float 3s ease-in-out infinite; } .pl-track{ position:relative; z-index:1; width:200px; height:3px; background:rgba(150, 150, 150, 0.15); border-radius:4px; overflow:hidden; margin-bottom:1.25rem; } .pl-bar{ width:40%; height:100%; background:linear-gradient(90deg, var(--primary, #FF4D00), var(--accent, #FFC107)); border-radius:4px; animation:pl-slide 1.5s cubic-bezier(0.65, 0, 0.35, 1) infinite; } @keyframes pl-pulse{ 0%{ transform:scale(0.9); opacity:0.10; } 100%{ transform:scale(1.15); opacity:0.20; } } @keyframes pl-float{ 0%, 100%{ transform:translateY(0); } 50%{ transform:translateY(-5px); } } @keyframes pl-slide{ 0%{ transform:translateX(-100%); } 100%{ transform:translateX(300%); } } .page-transition-overlay{ position:fixed; inset:0; z-index:999999; pointer-events:none; overflow:hidden; display:flex; align-items:center; justify-content:center; visibility:hidden; } .page-transition-overlay.pt-exit, .page-transition-overlay.pt-enter{ visibility:visible; pointer-events:auto; } .pt-layer{ position:absolute; inset:0; will-change:transform; -webkit-backface-visibility:hidden; backface-visibility:hidden; } .pt-layer-1{ z-index:1; background:rgba(10, 10, 15, 0.4); -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); opacity:0; } .pt-layer-2, .pt-layer-3, .pt-layer-4, .pt-layer-5{ height:400vh; bottom:auto; top:-150vh; left:-50vw; width:200vw; transform:translateY(350vh) skewY(-25deg); } .pt-layer-2{ z-index:2; background:#0A1128; } .pt-layer-3{ z-index:3; background:#901A00; } .pt-layer-4{ z-index:4; background:#FF4D00; } .pt-layer-5{ z-index:5; background:var(--bg-body, #F0F2F5); } [data-theme="dark"] .pt-layer-5{ background:var(--bg-body, #0A0A0A); } .pt-content{ position:relative; z-index:10; display:flex; align-items:center; justify-content:center; opacity:0; transform:translateY(30px) scale(0.85); } .pt-logo{ max-width:200px; height:auto; filter:drop-shadow(0 8px 32px rgba(209, 65, 0, 0.5)); } .page-transition-overlay .logo-light{display:block;} .page-transition-overlay .logo-dark {display:none;} [data-theme="dark"] .page-transition-overlay .logo-light{display:none !important;} [data-theme="dark"] .page-transition-overlay .logo-dark {display:block !important;} body.pt-navigating{ overflow:hidden !important; } body.pt-navigating #main-content{ transition:transform 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1), filter 0.45s cubic-bezier(0.4, 0, 0.2, 1); transform:scale(0.965); opacity:0.3; filter:blur(6px); } .pt-exit .pt-layer-1{ animation:ptFadeIn 0.3s ease-out forwards; } .pt-exit .pt-layer-2{animation:ptCurtainUp 0.65s cubic-bezier(0.62, 0.05, 0.36, 1) forwards;animation-delay:0.04s;} .pt-exit .pt-layer-3{animation:ptCurtainUp 0.65s cubic-bezier(0.62, 0.05, 0.36, 1) forwards;animation-delay:0.08s;} .pt-exit .pt-layer-4{animation:ptCurtainUp 0.65s cubic-bezier(0.62, 0.05, 0.36, 1) forwards;animation-delay:0.12s;} .pt-exit .pt-layer-5{animation:ptCurtainUp 0.65s cubic-bezier(0.62, 0.05, 0.36, 1) forwards;animation-delay:0.16s;} .pt-exit .pt-content{ animation:ptLogoIn 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; animation-delay:0.35s; } .pt-enter .pt-layer-1{ opacity:1; animation:ptFadeOut 0.35s ease-in forwards; animation-delay:0.35s; } .pt-enter .pt-layer-2{transform:translateY(0%);animation:ptCurtainDown 0.6s cubic-bezier(0.62, 0.05, 0.36, 1) forwards;animation-delay:0.16s;} .pt-enter .pt-layer-3{transform:translateY(0%);animation:ptCurtainDown 0.6s cubic-bezier(0.62, 0.05, 0.36, 1) forwards;animation-delay:0.12s;} .pt-enter .pt-layer-4{transform:translateY(0%);animation:ptCurtainDown 0.6s cubic-bezier(0.62, 0.05, 0.36, 1) forwards;animation-delay:0.08s;} .pt-enter .pt-layer-5{transform:translateY(0%);animation:ptCurtainDown 0.6s cubic-bezier(0.62, 0.05, 0.36, 1) forwards;animation-delay:0.04s;} .pt-enter .pt-content{ opacity:1; transform:translateY(0) scale(1); animation:ptLogoOut 0.28s ease-in forwards; } @keyframes ptFadeIn{ from{opacity:0;} to {opacity:1;} } @keyframes ptFadeOut{ from{opacity:1;} to {opacity:0;} } @keyframes ptCurtainUp{ 0% {transform:translateY(350vh) skewY(-25deg);} 100%{transform:translateY(0vh) skewY(-25deg);} } @keyframes ptCurtainDown{ 0% {transform:translateY(0vh) skewY(-25deg);} 100%{transform:translateY(-350vh) skewY(-25deg);} } @keyframes ptLogoIn{ 0% {opacity:0;transform:translateY(30px) scale(0.85);} 60% {opacity:1;} 100%{opacity:1;transform:translateY(0) scale(1);} } @keyframes ptLogoOut{ 0% {opacity:1;transform:translateY(0) scale(1);} 100%{opacity:0;transform:translateY(-20px) scale(1.06);filter:blur(5px);} } @media (prefers-reduced-motion:reduce){ .page-transition-overlay, .pt-layer, .pt-content{ animation:none !important; transition:none !important; } body.pt-navigating #main-content{ transition:none !important; transform:none !important; opacity:1 !important; filter:none !important; } } @media (prefers-reduced-motion:reduce){ .page-transition-overlay, .pt-layer, .pt-content{ -webkit-animation:none !important; animation:none !important; -webkit-transition:none !important; transition:none !important; } body.pt-navigating #main-content{ -webkit-transition:none !important; transition:none !important; -webkit-transform:none !important; transform:none !important; opacity:1 !important; -webkit-filter:none !important; filter:none !important; } } .pub-navbar{ position:fixed; top:0; left:0; right:0; z-index:1000; background:var(--glass-bg); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); border-bottom:1px solid var(--border-color); padding:1.15rem 0; transition:var(--transition); } .pub-navbar.scrolled{ box-shadow:var(--shadow-md); } .pub-navbar-inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; } .pub-navbar-brand{ display:flex; align-items:center; text-decoration:none; flex-shrink:0; } .pub-navbar-brand img{ height:70px; width:auto; } .pub-nav-desktop{ display:flex; align-items:center; list-style:none; gap:0.25rem; margin:0; padding:0; } .pub-nav-link{ color:var(--text-secondary); font-weight:500; font-size:0.92rem; padding:0.45rem 0.9rem; border-radius:8px; text-decoration:none; transition:var(--transition); position:relative; white-space:nowrap; } .pub-nav-link:hover{ color:var(--primary); } .pub-nav-link.active{ color:var(--primary); font-weight:600; } .pub-nav-link.active::after{ content:''; position:absolute; bottom:-2px; left:50%; transform:translateX(-50%); width:18px; height:2.5px; background:var(--primary); border-radius:2px; } .pub-nav-actions{ display:flex; align-items:center; gap:0.75rem; flex-shrink:0; } .pub-navbar .theme-btn, .pub-drawer .theme-btn{ background:var(--bg-input); border:1px solid var(--border-color); border-radius:50%; width:42px; height:42px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; color:var(--text-primary); font-size:1.2rem; transition:var(--transition); } .pub-navbar .theme-btn:hover, .pub-drawer .theme-btn:hover{ transform:scale(1.1) rotate(15deg); box-shadow:var(--shadow-sm); } [data-theme="dark"] .theme-btn .icon-sun{ display:inline; } [data-theme="dark"] .theme-btn .icon-moon{ display:none; } [data-theme="light"] .theme-btn .icon-sun{ display:none; } [data-theme="light"] .theme-btn .icon-moon{ display:inline; } .pub-navbar .btn-login, .pub-drawer .btn-login{ background:linear-gradient(135deg, var(--primary), var(--accent)); color:#fff !important; border:none; border-radius:50px; padding:0.6rem 1.6rem; font-weight:600; font-size:0.95rem; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:0.5rem; transition:var(--transition); white-space:nowrap; } .pub-navbar .btn-login:hover, .pub-drawer .btn-login:hover{ transform:translateY(-2px); box-shadow:0 6px 20px rgba(255, 77, 0, 0.4); } .pub-hamburger{ display:none; flex-direction:column; justify-content:center; align-items:center; gap:5px; width:42px; height:42px; background:var(--bg-input); border:1px solid var(--border-color); border-radius:10px; cursor:pointer; transition:var(--transition); padding:0; flex-shrink:0; } .pub-hamburger:hover{ background:var(--primary-light); border-color:var(--primary); } .pub-hamburger-line{ display:block; width:20px; height:2px; background:var(--text-primary); border-radius:2px; transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1); transform-origin:center; } .pub-hamburger.open .pub-hamburger-line:nth-child(1){ transform:translateY(7px) rotate(45deg); } .pub-hamburger.open .pub-hamburger-line:nth-child(2){ opacity:0; transform:scaleX(0); } .pub-hamburger.open .pub-hamburger-line:nth-child(3){ transform:translateY(-7px) rotate(-45deg); } .pub-drawer-overlay{ position:fixed; inset:0; z-index:1040; background:rgba(0, 0, 0, 0.5); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); opacity:0; visibility:hidden; transition:opacity 0.35s ease, visibility 0.35s ease; } .pub-drawer-overlay.open{ opacity:1; visibility:visible; } .pub-drawer{ position:fixed; top:0; right:0; bottom:0; z-index:1050; width:300px; max-width:85vw; background:var(--bg-card-solid); border-left:1px solid var(--border-color); box-shadow:-8px 0 40px rgba(0, 0, 0, 0.12); transform:translateX(100%); transition:transform 0.35s cubic-bezier(0.32, 0.72, 0, 1); display:flex; flex-direction:column; overflow-y:auto; overscroll-behavior:contain; } [data-theme="dark"] .pub-drawer{ background:rgba(15, 15, 20, 0.97); border-left:1px solid rgba(255, 255, 255, 0.06); box-shadow:-8px 0 40px rgba(0, 0, 0, 0.4); } .pub-drawer.open{ transform:translateX(0); } .pub-drawer-header{ display:flex; align-items:center; justify-content:space-between; padding:1rem 1.5rem; border-bottom:1px solid var(--border-color); flex-shrink:0; } .pub-drawer-header .pub-navbar-brand img{ height:36px; } .pub-drawer-close{ background:var(--bg-input); border:1px solid var(--border-color); border-radius:10px; width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; color:var(--text-secondary); font-size:1rem; transition:var(--transition); } .pub-drawer-close:hover{ background:rgba(255, 77, 0, 0.08); color:var(--primary); transform:rotate(90deg); } .pub-drawer-nav{ padding:1rem; display:flex; flex-direction:column; gap:0.2rem; flex:1; } .pub-drawer-link{ display:flex; align-items:center; gap:0.75rem; padding:0.8rem 1rem; border-radius:12px; color:var(--text-primary); text-decoration:none; font-size:0.95rem; font-weight:500; transition:all 0.2s ease; position:relative; opacity:0; transform:translateX(20px); } .pub-drawer.open .pub-drawer-link{ opacity:1; transform:translateX(0); } .pub-drawer.open .pub-drawer-link:nth-child(1){ transition-delay:0.08s; } .pub-drawer.open .pub-drawer-link:nth-child(2){ transition-delay:0.12s; } .pub-drawer.open .pub-drawer-link:nth-child(3){ transition-delay:0.16s; } .pub-drawer.open .pub-drawer-link:nth-child(4){ transition-delay:0.20s; } .pub-drawer.open .pub-drawer-link:nth-child(5){ transition-delay:0.24s; } .pub-drawer-link i{ font-size:1.1rem; width:22px; text-align:center; color:var(--text-muted); transition:var(--transition); } .pub-drawer-link:hover{ background:var(--primary-light); color:var(--primary); transform:translateX(4px); } .pub-drawer-link:hover i{ color:var(--primary); } .pub-drawer-link.active{ background:var(--primary-light); color:var(--primary); font-weight:600; } .pub-drawer-link.active i{ color:var(--primary); } .pub-drawer-link.active::before{ content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); width:3px; height:20px; background:var(--primary); border-radius:4px; } .pub-drawer-footer{ padding:1rem 1.5rem 1.5rem; border-top:1px solid var(--border-color); display:flex; flex-direction:column; gap:0.75rem; flex-shrink:0; } .pub-drawer-footer-row{ display:flex; align-items:center; gap:0.75rem; } .pub-drawer-theme-label{ font-size:0.85rem; font-weight:500; color:var(--text-secondary); } .pub-drawer-cta{ width:100%; text-align:center; padding:0.75rem 1.5rem !important; border-radius:12px !important; font-size:0.95rem !important; justify-content:center; } @media (max-width:991.98px){ .pub-nav-desktop, .pub-nav-actions{ display:none !important; } .pub-hamburger{ display:flex !important; } .pub-navbar-brand img{ height:42px; } } @media (max-width:576px){ .pub-navbar{ padding:0.35rem 0; } .pub-navbar-brand img{ height:36px; } .pub-hamburger{ width:38px; height:38px; border-radius:8px; } .pub-hamburger-line{ width:18px; } .pub-drawer{ width:280px; } } .hero-section{ min-height:100vh; display:flex; align-items:center; padding:7rem 1rem 3rem; position:relative; overflow:hidden; background:var(--bg-body); } .min-vh-hero{ min-height:calc(100vh - 10rem); } .hero-split .hero-content-col{ text-align:left; } .hero-split .hero-badge-pill{ margin-left:0; margin-right:auto; } .hero-split .hero-description{ margin-left:0; margin-right:0; } .hero-split .hero-tracker-wrap{ margin-left:0; margin-right:0; } .hero-visual-col{ display:flex; align-items:center; justify-content:center; position:relative; } .hero-visual-wrapper{ position:relative; width:100%; max-width:560px; margin:0 auto; display:flex; align-items:center; justify-content:center; } .hero-illustration{ width:100%; max-width:560px; height:auto; object-fit:contain; position:relative; z-index:2; filter:drop-shadow(0 30px 60px rgba(0, 0, 0, 0.12)); animation:heroIllustrationFloat 6s ease-in-out infinite; } [data-theme="dark"] .hero-illustration{ filter:drop-shadow(0 30px 60px rgba(0, 0, 0, 0.4)) drop-shadow(0 0 80px rgba(255, 77, 0, 0.08)) brightness(0.92); mix-blend-mode:lighten; } @keyframes heroIllustrationFloat{ 0%, 100%{ transform:translateY(0); } 50%{ transform:translateY(-16px); } } .hero-glow-ring{ position:absolute; width:85%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle, rgba(255, 77, 0, 0.12) 0%, rgba(255, 193, 7, 0.06) 40%, transparent 70%); top:50%; left:50%; transform:translate(-50%, -50%); z-index:0; animation:glowRingPulse 5s ease-in-out infinite alternate; pointer-events:none; } [data-theme="dark"] .hero-glow-ring{ background:radial-gradient(circle, rgba(255, 77, 0, 0.18) 0%, rgba(255, 193, 7, 0.08) 40%, transparent 70%); } @keyframes glowRingPulse{ 0%{ opacity:0.7; transform:translate(-50%, -50%) scale(0.95); } 100%{ opacity:1; transform:translate(-50%, -50%) scale(1.05); } } .hero-float-card{ position:absolute; z-index:3; display:flex; align-items:center; gap:0.6rem; background:var(--glass-bg); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); border:1px solid var(--border-color); border-radius:14px; padding:0.75rem 1.25rem; font-size:0.85rem; font-weight:600; color:var(--text-secondary); box-shadow:var(--shadow-md); white-space:nowrap; } .hero-float-card i{ color:var(--primary); font-size:1rem; } .hfc-top{ top:8%; right:-5%; animation:floatCardTop 5s ease-in-out infinite; } .hfc-bottom{ bottom:12%; left:-5%; animation:floatCardBottom 5.5s ease-in-out infinite; } @keyframes floatCardTop{ 0%, 100%{ transform:translateY(0) rotate(0deg); } 50%{ transform:translateY(-10px) rotate(1deg); } } @keyframes floatCardBottom{ 0%, 100%{ transform:translateY(0) rotate(0deg); } 50%{ transform:translateY(-8px) rotate(-1deg); } } .hero-social-proof{ display:flex; align-items:center; gap:1.25rem; flex-wrap:wrap; } .avatars-group{ display:flex; align-items:center; } .avatars-group img{ width:40px; height:40px; border-radius:50%; border:2.5px solid var(--bg-body); object-fit:cover; margin-left:-10px; transition:transform 0.2s ease; } .avatars-group img:first-child{ margin-left:0; } .avatars-group img:hover{ transform:scale(1.12) translateY(-2px); z-index:2; } .avatar-more{ width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg, var(--primary), var(--accent)); color:#fff; font-size:0.7rem; font-weight:700; display:flex; align-items:center; justify-content:center; margin-left:-10px; border:2.5px solid var(--bg-body); } .social-proof-text{ display:flex; flex-direction:column; gap:0.15rem; } .social-proof-text .stars{ display:flex; align-items:center; gap:0.15rem; color:#FBBF24; font-size:0.85rem; } .rating-score{ color:var(--text-primary); font-weight:700; font-size:0.85rem; margin-left:0.35rem; } .proof-desc{ font-size:0.82rem; color:var(--text-muted); font-weight:500; } .hero-accent-shape{ position:absolute; z-index:1; pointer-events:none; opacity:0.2; -webkit-transition:opacity 0.3s ease; transition:opacity 0.3s ease; } [data-theme="dark"] .hero-accent-shape{ opacity:0.12; } .shape-cross{ top:4%; left:70%; width:18px; height:18px; } .shape-cross::before, .shape-cross::after{ content:''; position:absolute; background:var(--primary); border-radius:2px; } .shape-cross::before{ width:18px; height:2px; top:50%; left:0; -webkit-transform:translateY(-50%); transform:translateY(-50%); } .shape-cross::after{ width:2px; height:18px; left:50%; top:0; -webkit-transform:translateX(-50%); transform:translateX(-50%); } .shape-circle{ top:28%; right:6%; width:12px; height:12px; border:2.5px solid var(--accent); border-radius:50%; } .shape-dots{ bottom:18%; right:9%; width:24px; height:24px; display:grid; grid-template-columns:repeat(3, 4px); grid-template-rows:repeat(3, 4px); gap:4px; } .shape-dots::before{ content:''; grid-column:1 / -1; grid-row:1 / -1; background-image: radial-gradient(circle, var(--primary) 2px, transparent 2px); background-size:8px 8px; background-position:0 0; } .shape-line{ top:46%; right:4%; width:34px; height:2px; background:linear-gradient(90deg, var(--primary), transparent); border-radius:2px; -webkit-transform:rotate(-20deg); transform:rotate(-20deg); } .shape-diamond{ top:25%; right:5%; width:10px; height:10px; border:1.75px solid var(--primary); -webkit-transform:rotate(45deg); transform:rotate(45deg); border-radius:2px; } .shape-arc{ top:0%; right:-2%; width:22px; height:22px; border:2px solid transparent; border-top-color:var(--accent); border-right-color:var(--accent); border-radius:0 50% 0 0; } .shape-triangle{ top:42%; right:14%; width:0; height:0; border-left:8px solid transparent; border-right:8px solid transparent; border-bottom:14px solid var(--accent); opacity:0.22; } .shape-ring{ bottom:34%; right:3%; width:26px; height:26px; border:1.8px solid transparent; border-bottom-color:var(--primary); border-left-color:var(--primary); border-radius:50%; opacity:0.16; } .shape-hash{ top:68%; right:15%; width:18px; height:18px; opacity:0.2; } .shape-hash::before, .shape-hash::after{ content:''; position:absolute; background:var(--accent); border-radius:1px; } .shape-hash::before{ width:18px; height:2px; top:6px; left:0; } .shape-hash::after{ width:18px; height:2px; top:12px; left:0; } .shape-zigzag{ bottom:12%; right:2%; width:32px; height:12px; opacity:0.2; overflow:visible; } .shape-zigzag::before{ content:''; position:absolute; width:32px; height:12px; background:linear-gradient(135deg, transparent 25%, var(--primary) 25%, var(--primary) 50%, transparent 50%, transparent 75%, var(--primary) 75%); background-size:8px 12px; opacity:0.6; } .shape-bracket{ top:78%; right:8%; width:14px; height:22px; border:2px solid transparent; border-right-color:var(--primary); border-top-color:var(--primary); border-bottom-color:var(--primary); border-radius:0 4px 4px 0; opacity:0.18; } .shape-pulse{ top:58%; right:6%; width:8px; height:8px; background:var(--accent); border-radius:50%; opacity:0.35; } .shape-pulse::after{ content:''; position:absolute; inset:-4px; border:1.5px solid var(--accent); border-radius:50%; opacity:0.4; -webkit-animation:shapePulseRing 3s ease-in-out infinite; animation:shapePulseRing 3s ease-in-out infinite; } @-webkit-keyframes shapePulseRing{ 0%, 100%{-webkit-transform:scale(1);transform:scale(1);opacity:0.4;} 50%{-webkit-transform:scale(1.8);transform:scale(1.8);opacity:0;} } @keyframes shapePulseRing{ 0%, 100%{-webkit-transform:scale(1);transform:scale(1);opacity:0.4;} 50%{-webkit-transform:scale(1.8);transform:scale(1.8);opacity:0;} } @-webkit-keyframes shapeFloat{ 0%, 100%{-webkit-transform:translateY(0);transform:translateY(0);} 50%{-webkit-transform:translateY(-6px);transform:translateY(-6px);} } @keyframes shapeFloat{ 0%, 100%{-webkit-transform:translateY(0);transform:translateY(0);} 50%{-webkit-transform:translateY(-6px);transform:translateY(-6px);} } .shape-cross {-webkit-animation:shapeFloat 6s ease-in-out infinite;animation:shapeFloat 6s ease-in-out infinite;} .shape-circle {-webkit-animation:shapeFloat 7s ease-in-out infinite 0.5s;animation:shapeFloat 7s ease-in-out infinite 0.5s;} .shape-dots {-webkit-animation:shapeFloat 5.5s ease-in-out infinite 1s;animation:shapeFloat 5.5s ease-in-out infinite 1s;} .shape-triangle {-webkit-animation:shapeFloat 6.8s ease-in-out infinite 0.4s;animation:shapeFloat 6.8s ease-in-out infinite 0.4s;} .shape-ring {-webkit-animation:shapeFloat 7.2s ease-in-out infinite 0.8s;animation:shapeFloat 7.2s ease-in-out infinite 0.8s;} .shape-hash {-webkit-animation:shapeFloat 5.8s ease-in-out infinite 1.2s;animation:shapeFloat 5.8s ease-in-out infinite 1.2s;} .shape-zigzag {-webkit-animation:shapeFloat 6.4s ease-in-out infinite 0.6s;animation:shapeFloat 6.4s ease-in-out infinite 0.6s;} .shape-bracket {-webkit-animation:shapeFloat 7.6s ease-in-out infinite 1.1s;animation:shapeFloat 7.6s ease-in-out infinite 1.1s;} .shape-pulse {-webkit-animation:shapeFloat 5.2s ease-in-out infinite 0.3s;animation:shapeFloat 5.2s ease-in-out infinite 0.3s;} @-webkit-keyframes shapeDiamondFloat{ 0%, 100%{-webkit-transform:rotate(45deg) translateY(0);transform:rotate(45deg) translateY(0);} 50%{-webkit-transform:rotate(45deg) translateY(-6px);transform:rotate(45deg) translateY(-6px);} } @keyframes shapeDiamondFloat{ 0%, 100%{-webkit-transform:rotate(45deg) translateY(0);transform:rotate(45deg) translateY(0);} 50%{-webkit-transform:rotate(45deg) translateY(-6px);transform:rotate(45deg) translateY(-6px);} } .shape-diamond{-webkit-animation:shapeDiamondFloat 6.5s ease-in-out infinite 0.7s;animation:shapeDiamondFloat 6.5s ease-in-out infinite 0.7s;} @-webkit-keyframes shapeLineFloat{ 0%, 100%{-webkit-transform:rotate(-25deg) translateY(0);transform:rotate(-25deg) translateY(0);} 50%{-webkit-transform:rotate(-25deg) translateY(-5px);transform:rotate(-25deg) translateY(-5px);} } @keyframes shapeLineFloat{ 0%, 100%{-webkit-transform:rotate(-20deg) translateY(0);transform:rotate(-20deg) translateY(0);} 50%{-webkit-transform:rotate(-20deg) translateY(-5px);transform:rotate(-20deg) translateY(-5px);} } .shape-line{-webkit-animation:shapeLineFloat 8s ease-in-out infinite 0.3s;animation:shapeLineFloat 8s ease-in-out infinite 0.3s;} @-webkit-keyframes shapeArcSpin{ 0%, 100%{-webkit-transform:rotate(0deg) translateY(0);transform:rotate(0deg) translateY(0);} 50%{-webkit-transform:rotate(15deg) translateY(-4px);transform:rotate(15deg) translateY(-4px);} } @keyframes shapeArcSpin{ 0%, 100%{-webkit-transform:rotate(0deg) translateY(0);transform:rotate(0deg) translateY(0);} 50%{-webkit-transform:rotate(15deg) translateY(-4px);transform:rotate(15deg) translateY(-4px);} } .shape-arc{-webkit-animation:shapeArcSpin 7.5s ease-in-out infinite 0.2s;animation:shapeArcSpin 7.5s ease-in-out infinite 0.2s;} @-webkit-keyframes shapeRingDrift{ 0%, 100%{-webkit-transform:rotate(0deg);transform:rotate(0deg);} 50%{-webkit-transform:rotate(45deg);transform:rotate(45deg);} } @keyframes shapeRingDrift{ 0%, 100%{-webkit-transform:rotate(0deg);transform:rotate(0deg);} 50%{-webkit-transform:rotate(45deg);transform:rotate(45deg);} } .shape-ring{-webkit-animation:shapeRingDrift 10s ease-in-out infinite;animation:shapeRingDrift 10s ease-in-out infinite;} @media (max-width:991.98px){ .hero-accent-shape{ display:none; } } .hero-aura{ position:absolute; inset:0; pointer-events:none; z-index:0; overflow:hidden; } .aura{ position:absolute; border-radius:50%; filter:blur(140px); opacity:0.15; mix-blend-mode:screen; } [data-theme="dark"] .aura{ opacity:0.12; mix-blend-mode:normal; } .aura-1{ width:800px; height:800px; background:var(--primary); top:-20%; left:10%; animation:auraFloat1 25s ease-in-out infinite alternate; } .aura-2{ width:600px; height:600px; background:var(--accent); bottom:-15%; right:-5%; animation:auraFloat2 20s ease-in-out infinite alternate; } .aura-3{ width:500px; height:500px; background:#8B5CF6; top:30%; left:45%; animation:auraFloat3 18s ease-in-out infinite alternate; } .aura-noise{ position:absolute; inset:0; background:url('data:image/svg+xml,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noiseFilter"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noiseFilter)" opacity="0.04"/%3E%3C/svg%3E'); opacity:0.04; mix-blend-mode:overlay; z-index:1; } @keyframes auraFloat1{ 0%{ transform:translate(0, 0) scale(1); } 100%{ transform:translate(100px, 80px) scale(1.1); } } @keyframes auraFloat2{ 0%{ transform:translate(0, 0) scale(1); } 100%{ transform:translate(-150px, -100px) scale(1.2); } } @keyframes auraFloat3{ 0%{ transform:translate(0, 0) scale(1); } 100%{ transform:translate(-80px, 120px) scale(0.9); } } .hero-grid-overlay{ position:absolute; inset:0; z-index:1; background-image: linear-gradient(rgba(255, 77, 0, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 77, 0, 0.05) 1px, transparent 1px); background-size:60px 60px; opacity:0.8; pointer-events:none; mask-image:radial-gradient(ellipse 70% 70% at 50% 50%, black 20%, transparent 80%); -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 50%, black 20%, transparent 80%); } [data-theme="dark"] .hero-grid-overlay{ background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px); } .hero-badge-pill{ display:inline-flex; align-items:center; gap:0.6rem; background:var(--glass-bg); backdrop-filter:blur(24px); border:1px solid var(--border-color); padding:0.5rem 1.25rem; border-radius:100px; font-size:0.85rem; font-weight:600; color:var(--text-secondary); margin-bottom:2rem; box-shadow:var(--shadow-sm); } .hero-badge-pill i{ font-size:0.9rem; color:var(--primary); animation:stars-sparkle 2s infinite ease-in-out alternate; } @keyframes stars-sparkle{ 0%{ transform:scale(1); opacity:0.8; } 100%{ transform:scale(1.2); opacity:1; color:var(--accent); } } .hero-headline{ font-family:'Plus Jakarta Sans', var(--font-family); font-weight:800; font-size:clamp(2.5rem, 6vw, 4.8rem); color:var(--text-primary); line-height:1.1; margin-bottom:1.5rem; letter-spacing:-0.04em; } .headline-gradient{ background:linear-gradient(135deg, var(--primary) 0%, var(--accent) 50%, #FF6B6B 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; } .hero-description{ font-size:1.2rem; color:var(--text-secondary); max-width:650px; margin-bottom:3.5rem; line-height:1.7; font-weight:400; } .hero-lite{ opacity:1; transform:translateY(0) scale(1); filter:none; animation:heroFadeUp 0.85s cubic-bezier(0.22, 1, 0.36, 1); animation-delay:var(--delay, 0s); animation-fill-mode:both; } @keyframes heroFadeUp{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:translateY(0); } } .hero-tracker-wrap{ max-width:650px; position:relative; margin-bottom:3rem; } .hero-tracker-wrap::before{ content:''; position:absolute; inset:-4px; background:linear-gradient(90deg, var(--primary), var(--hero-glow-inner), var(--primary)); background-size:200% auto; border-radius:60px; filter:blur(16px); opacity:0.25; animation:shine 4s linear infinite; z-index:-1; } [data-theme="dark"] .hero-tracker-wrap::before{ opacity:0.4; filter:blur(20px); } .hero-tracker{ background:var(--glass-bg); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); border:1px solid rgba(255, 255, 255, 0.15); border-radius:60px; padding:0.6rem 0.6rem 0.6rem 1.5rem; display:flex; align-items:center; box-shadow:0 20px 40px rgba(0, 0, 0, 0.08); transition:var(--transition); } [data-theme="dark"] .hero-tracker{ background:rgba(30, 41, 59, 0.6); border-color:rgba(255, 255, 255, 0.05); } .hero-tracker:focus-within{ border-color:var(--primary); transform:translateY(-2px); box-shadow:0 25px 50px rgba(0, 0, 0, 0.12); } .tracker-icon{ font-size:1.4rem; color:var(--primary); margin-right:1rem; } .hero-tracker input{ flex:1; background:transparent; border:none; color:var(--text-primary); font-size:1.1rem; outline:none; font-family:var(--font-family); font-weight:500; } .hero-tracker input::placeholder{ color:rgba(26, 29, 41, 0.45); font-weight:400; } [data-theme="dark"] .hero-tracker input::placeholder{ color:rgba(255, 255, 255, 0.5); } .hero-tracker .tracker-btn{ background:var(--text-primary); color:var(--bg-body); border:none; border-radius:50px; padding:1.1rem 2.5rem; font-weight:700; cursor:pointer; transition:var(--transition); white-space:nowrap; font-size:1rem; } .hero-tracker .tracker-btn:hover{ transform:scale(1.02); background:linear-gradient(135deg, var(--primary), var(--accent)); color:white; } @keyframes shine{ 0%{ background-position:0% center; } 100%{ background-position:200% center; } } .hero-ambient-stats{ font-weight:600; color:var(--text-secondary); font-size:0.95rem; } .stat-item{ display:flex; align-items:center; gap:0.5rem; } .active-glow{ color:#fff; background:linear-gradient(135deg, var(--success), #059669); width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; font-size:0.8rem; box-shadow:0 0 12px rgba(0, 214, 143, 0.4); } .stat-item:nth-child(2) .active-glow{ background:linear-gradient(135deg, var(--primary), var(--accent)); box-shadow:0 0 12px rgba(255, 77, 0, 0.4); } .stat-item:nth-child(3) .active-glow{ background:linear-gradient(135deg, #8B5CF6, #6D28D9); box-shadow:0 0 12px rgba(139, 92, 246, 0.4); } .stat-item:nth-child(2) .active-glow{ color:var(--text-on-primary); filter:drop-shadow(0 0 8px rgba(255, 77, 0, 0.4)); } .stat-item:nth-child(3) .active-glow{ color:var(--text-on-primary); filter:drop-shadow(0 0 8px rgba(139, 92, 246, 0.4)); } .scroll-indicator{ position:absolute; bottom:2.5rem; left:50%; transform:translateX(-50%); z-index:3; display:flex; flex-direction:column; align-items:center; gap:0.4rem; opacity:0.6; transition:opacity 0.3s ease; } .scroll-indicator:hover{ opacity:1; } .scroll-label{ font-size:0.7rem; font-weight:600; letter-spacing:0.15em; text-transform:uppercase; color:var(--text-muted); } .scroll-chevrons{ display:flex; flex-direction:column; align-items:center; gap:0; line-height:0; } .scroll-chevrons i{ font-size:1rem; color:var(--primary); animation:chevronBounce 2s ease-in-out infinite; } .scroll-chevrons .chevron-1{ opacity:0.4; animation-delay:0s; } .scroll-chevrons .chevron-2{ opacity:0.8; animation-delay:0.15s; margin-top:-6px; } @keyframes chevronBounce{ 0%, 100%{ transform:translateY(0); opacity:0.3; } 50%{ transform:translateY(5px); opacity:1; } } .trust-marquee-section{ position:relative; padding:1.8rem 0; background:var(--bg-card-solid); border-top:1px solid var(--border-color); border-bottom:1px solid var(--border-color); overflow:hidden; } .trust-marquee-section::before, .trust-marquee-section::after{ content:''; position:absolute; top:0; bottom:0; width:160px; z-index:2; pointer-events:none; } .trust-marquee-section::before{ left:0; background:linear-gradient(90deg, var(--bg-card-solid) 20%, transparent 100%); } .trust-marquee-section::after{ right:0; background:linear-gradient(270deg, var(--bg-card-solid) 20%, transparent 100%); } .marquee-track{ display:flex; width:max-content; } .marquee-content{ display:flex; align-items:center; gap:2rem; animation:marqueeScroll 45s linear infinite; will-change:transform; } .marquee-content:hover{ animation-play-state:paused; } .trust-pill{ display:inline-flex; align-items:center; gap:0.6rem; padding:0.65rem 1.5rem; background:var(--glass-bg); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border:1px solid var(--border-color); border-radius:100px; font-size:0.85rem; font-weight:600; color:var(--text-secondary); white-space:nowrap; letter-spacing:0.03em; transition:var(--transition); box-shadow:var(--shadow-sm); } .trust-pill:hover{ border-color:rgba(255, 77, 0, 0.25); box-shadow:0 0 20px rgba(255, 77, 0, 0.08); color:var(--text-primary); transform:translateY(-1px); } .trust-pill i{ color:var(--primary); font-size:0.95rem; filter:drop-shadow(0 0 4px rgba(255, 77, 0, 0.3)); } .trust-dot{ width:5px; height:5px; border-radius:50%; background:linear-gradient(135deg, var(--primary), var(--accent)); opacity:0.35; flex-shrink:0; box-shadow:0 0 6px rgba(255, 77, 0, 0.2); } @keyframes marqueeScroll{ 0%{ transform:translateX(0); } 100%{ transform:translateX(-50%); } } .reveal{ opacity:0; visibility:hidden; transform:translateY(60px) scale(0.95); filter:blur(10px); } .pub-section{ padding:7rem 0; } .pub-section-alt{ padding:7rem 0; background:var(--bg-card-solid); border-top:1px solid var(--border-color); border-bottom:1px solid var(--border-color); } .section-header{ text-align:center; margin-bottom:4.5rem; } .section-badge{ display:inline-block; background:var(--bg-card); color:var(--primary); padding:0.4rem 1.1rem; border-radius:50px; font-size:0.78rem; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; margin-bottom:1.25rem; border:1px solid rgba(255, 77, 0, 0.2); box-shadow:0 4px 12px rgba(255, 77, 0, 0.08); } .section-title{ font-family:'Plus Jakarta Sans', var(--font-family); font-weight:800; font-size:clamp(1.8rem, 3.5vw, 2.8rem); color:var(--text-primary); letter-spacing:-0.03em; margin-bottom:0.85rem; line-height:1.2; } .section-desc{ font-size:1.05rem; color:var(--text-secondary); max-width:550px; margin:0 auto; line-height:1.7; } .bento-section{ position:relative; } .bento-grid-v2{ display:grid; grid-template-columns:repeat(4, 1fr); grid-auto-rows:minmax(200px, auto); gap:1.5rem; } @media (max-width:992px){ .bento-grid-v2{ grid-template-columns:repeat(2, 1fr); } } @media (max-width:768px){ .bento-grid-v2{ grid-template-columns:1fr; } } .bento-glass-card{ background:var(--glass-bg); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); border:1px solid var(--glass-border); border-radius:28px; padding:2.5rem; position:relative; overflow:hidden; transition:all 0.45s cubic-bezier(0.16, 1, 0.3, 1); display:flex; flex-direction:column; } .bento-card-accent{ position:absolute; top:0; left:10%; right:10%; height:3px; border-radius:0 0 100px 100px; background:linear-gradient(90deg, transparent, var(--primary), var(--accent), transparent); opacity:0.7; transition:opacity 0.4s ease; } .bento-card-accent.accent-green{ background:linear-gradient(90deg, transparent, #10B981, #059669, transparent); } .bento-card-accent.accent-blue{ background:linear-gradient(90deg, transparent, #3B82F6, #60A5FA, transparent); } .bento-card-accent.accent-purple{ background:linear-gradient(90deg, transparent, #8B5CF6, #A78BFA, transparent); } @media (hover:hover) and (pointer:fine){ .bento-glass-card:hover .bento-card-accent{ opacity:1; left:5%; right:5%; } } .bento-orb{ position:absolute; width:200px; height:200px; border-radius:50%; filter:blur(80px); opacity:0.12; pointer-events:none; transition:opacity 0.5s ease, transform 0.5s ease; z-index:0; } @media (hover:hover) and (pointer:fine){ .bento-glass-card:hover .bento-orb{ opacity:0.22; transform:scale(1.15); } } .orb-orange{ background:var(--primary); bottom:-30%; right:-15%; } .orb-green{ background:#10B981; bottom:-20%; right:-10%; } .orb-blue{ background:#3B82F6; bottom:-20%; right:-10%; } .orb-purple{ background:#8B5CF6; bottom:-20%; right:-10%; } .bento-hover-glow::before{ content:''; position:absolute; inset:0; border-radius:inherit; padding:2px; background:linear-gradient(135deg, var(--primary), transparent 40%, transparent 60%, var(--accent)); -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:opacity 0.5s ease; } @media (hover:hover) and (pointer:fine){ .bento-glass-card:hover .bento-hover-glow::before{ opacity:1; } } .pub-navbar .logo-light, .pub-navbar .logo-dark{ margin-bottom:-14px; object-fit:contain; } .pub-mobile-toggle{ color:var(--text-primary); font-size:1.6rem; transition:transform 0.2s; } .pub-offcanvas{ background:var(--bg-body); border-left:1px solid var(--border-color); } .pub-offcanvas-header{ border-bottom:1px solid var(--border-color); padding:1.25rem 1.5rem; } .pub-offcanvas-title{ font-weight:700; font-size:1.25rem; } .pub-btn-close{ filter:var(--btn-close-filter, none); } .pub-nav-link-lg{ font-size:1.05rem; } .pub-theme-toggle-btn{ width:44px; height:44px; border-radius:50%; } .pub-footer{ position:relative; overflow:hidden; margin-top:4rem; padding-top:3rem; padding-bottom:1.5rem; background:var(--bg-body); border-top:1px solid var(--border-color); } .pub-footer .footer-blur-1{ position:absolute; top:-50%; left:-20%; width:50%; height:100%; background:radial-gradient(circle, var(--primary) 0%, transparent 70%); filter:blur(120px); opacity:0.05; pointer-events:none; } .pub-footer .footer-blur-2{ position:absolute; bottom:0; right:-10%; width:40%; height:100%; background:radial-gradient(circle, var(--accent) 0%, transparent 60%); filter:blur(120px); opacity:0.05; pointer-events:none; } .footer-brand .logo-light, .footer-brand .logo-dark{ object-fit:contain; } .pub-footer-text{ color:var(--text-secondary); line-height:1.7; font-size:0.95rem; margin-bottom:1.5rem; } .footer-social{ display:flex; gap:0.8rem; } .footer-social a{ display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:12px; background:var(--glass-bg); color:var(--text-primary); border:1px solid var(--border-color); transition:all 0.3s; text-decoration:none; } .footer-social a:hover{ background:var(--primary) !important; color:#fff !important; border-color:var(--primary) !important; transform:translateY(-3px); } .pub-footer-h3{ font-size:1.1rem; font-weight:700; margin-bottom:1.5rem; color:var(--text-primary); } .pub-footer-h3.mb-1rem{ margin-bottom:1rem; } .pub-footer-link{ color:var(--text-secondary); text-decoration:none; transition:color 0.2s; } .pub-footer-link:hover{ color:var(--primary); } .footer-newsletter{ position:relative; display:flex; align-items:center; background:var(--glass-bg); border:1px solid var(--border-color); border-radius:50px; padding:0.3rem; overflow:hidden; max-width:100%; } .footer-newsletter:focus-within{ border-color:var(--primary); box-shadow:0 0 0 3px rgba(255, 77, 0, 0.15); } .footer-newsletter input{ flex:1; border:none; background:transparent; padding:0.75rem 1rem; color:var(--text-primary); font-size:0.95rem; outline:none; width:100%; } .footer-newsletter button{ background:var(--primary); color:#fff; border:none; border-radius:50px; width:44px; height:44px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:transform 0.2s, background 0.2s; } .footer-newsletter button:hover{ transform:scale(1.05); background:#e04400; } .footer-newsletter button i{ transform:translateX(-1px); } .pub-footer-bottom{ padding-top:1.5rem; border-top:1px solid var(--border-color); display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:1rem; } .pub-footer-bottom p{ margin:0; color:var(--text-secondary); font-size:0.9rem; } .pub-footer-bottom a{ color:var(--text-primary); font-weight:600; text-decoration:none; } .pub-footer-bottom i{ color:var(--danger); font-size:0.8rem; animation:pulse 2s infinite; } .z-index-1{ z-index:1; } .mb-0-4rem{ margin-bottom:0.4rem; } .mb-0{ margin-bottom:0; } .min-w-56{ min-width:56px; } .w-56{ width:56px; } .h-56{ height:56px; } .rounded-14{ border-radius:14px; } .fs-1-3rem{ font-size:1.3rem; } .section-badge-accent{ background:rgba(255, 193, 7, 0.15); color:var(--accent); } .service-icon-red{ background:linear-gradient(135deg, #FF6B6B, #FF8E8E); } .service-icon-orange-gradient{ background:linear-gradient(135deg, #FF4D00, #FFC107); } .feature-card-row{ display:flex; gap:1.25rem; align-items:flex-start; padding:2rem; } .feature-icon-row{ min-width:56px; width:56px; height:56px; border-radius:14px; font-size:1.3rem; margin-bottom:0; } .contact-card-h2{ font-weight:700; color:var(--text-primary); margin-bottom:0.5rem; font-size:1.5rem; } .contact-card-h2-mb-1-5{ font-weight:700; color:var(--text-primary); margin-bottom:1.5rem; font-size:1.5rem; } .contact-card-p{ color:var(--text-secondary); font-size:0.9rem; margin-bottom:2rem; } .contact-alert{ margin-bottom:1.5rem; } .contact-label{ font-weight:600; color:var(--text-primary); font-size:0.9rem; } .contact-textarea{ height:auto; resize:vertical; } .contact-btn{ width:auto; padding:0.8rem 2.5rem; border-radius:50px; } .contact-card-mb{ margin-bottom:1.5rem; } .contact-info-item-last{ margin-bottom:0; } .text-primary-icon{ color:var(--primary); } .track-page-section{ position:relative; padding:0 0 80px; min-height:auto; overflow:visible; } .track-search-card{ background:var(--glass-bg); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); border:1px solid var(--border-color); border-radius:24px; padding:3rem; box-shadow:var(--shadow-lg); position:relative; z-index:10; margin-bottom:3rem; } .track-search-title{ font-family:'Plus Jakarta Sans', sans-serif; font-weight:800; color:var(--text-primary); } .track-search-desc{ font-size:1.1rem; } .timeline-bento-card{ background:var(--glass-bg); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); border:1px solid var(--border-color); border-radius:24px; padding:2.5rem; box-shadow:var(--shadow-lg); position:relative; z-index:10; margin-bottom:2rem; } .timeline-bento-card-dark{ background:var(--bg-card); border-color:var(--border-color); } [data-theme="dark"] .timeline-bento-card-dark{ background:rgba(15, 23, 42, 0.5); border-color:rgba(255, 255, 255, 0.08); } .parcel-overview{ border-bottom:1px dashed var(--border-color); padding-bottom:1.5rem; margin-bottom:2rem; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; } .tracking-badge{ background:linear-gradient(135deg, rgba(255, 77, 0, 0.1), rgba(255, 77, 0, 0.2)); color:var(--primary); padding:0.6rem 1.2rem; border-radius:8px; font-weight:800; font-size:1.1rem; letter-spacing:1px; border:1px solid rgba(255, 77, 0, 0.3); } .btn-receipt{ display:inline-flex; align-items:center; gap:0.55rem; padding:0.8rem 1.25rem; border-radius:999px; border:1px solid rgba(255, 77, 0, 0.2); background:rgba(255, 77, 0, 0.08); color:var(--primary); font-weight:700; text-decoration:none; transition:var(--transition); } .btn-receipt:hover{ background:var(--primary); color:#fff; border-color:var(--primary); transform:translateY(-2px); box-shadow:0 4px 15px rgba(255, 77, 0, 0.3); } .timeline{ position:relative; padding-left:2.5rem; margin:0; list-style:none; } .timeline::before{ content:''; position:absolute; left:0.75rem; top:0; bottom:0; width:3px; background:var(--border-color); border-radius:3px; } .timeline-item{ position:relative; margin-bottom:2.5rem; } .timeline-marker{ position:absolute; left:-2.5rem; width:24px; height:24px; border-radius:50%; background:var(--bg-surface); border:4px solid var(--border-color); display:flex; align-items:center; justify-content:center; z-index:1; transition:all 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .timeline-item.completed .timeline-marker{ background:var(--success); border-color:var(--success); box-shadow:0 0 0 6px rgba(0, 214, 143, 0.2); } .timeline-item.completed .timeline-marker::after{ content:'\F26A'; font-family:'bootstrap-icons'; color:white; font-size:0.8rem; font-weight:bold; } .timeline-item.current .timeline-marker{ background:var(--primary); border-color:var(--primary); box-shadow:0 0 0 6px rgba(255, 77, 0, 0.3); animation:pulse-ring 2s infinite; } @keyframes pulse-ring{ 0%{ box-shadow:0 0 0 0 rgba(255, 77, 0, 0.6); } 100%{ box-shadow:0 0 0 12px rgba(255, 77, 0, 0); } } .timeline-content{ background:transparent; padding:1.25rem 1.5rem; border-radius:16px; border:1px solid transparent; opacity:0.5; transition:var(--transition); } .timeline-item.completed .timeline-content, .timeline-item.current .timeline-content{ opacity:1; background:rgba(255, 255, 255, 0.02); border:1px solid var(--border-color); } .timeline-title{ font-weight:800; color:var(--text-primary); font-size:1.15rem; margin-bottom:0.35rem; } .timeline-desc{ color:var(--text-secondary); font-size:0.95rem; margin-bottom:0; } .timeline-time{ font-size:0.85rem; color:var(--primary); margin-top:0.7rem; display:inline-block; font-weight:600; background:rgba(255, 77, 0, 0.1); padding:4px 10px; border-radius:6px; } .track-pt-60{ padding-top:60px; } .track-glass-panel, .track-feature-glass{ border-radius:24px; background:var(--glass-bg); border:1px solid var(--glass-border); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); } .track-icon-lg-primary{ font-size:2.8rem; color:var(--primary); margin-bottom:1.5rem; } .track-icon-lg-accent{ font-size:2.8rem; color:var(--accent); margin-bottom:1.5rem; } .track-icon-lg-success{ font-size:2.8rem; color:var(--success); margin-bottom:1.5rem; } .track-feature-heading{ font-weight:800; font-family:'Plus Jakarta Sans', sans-serif; } .track-error-alert{ max-width:600px; border-radius:12px; background:rgba(255, 0, 0, 0.1); border:1px solid rgba(255, 0, 0, 0.2); color:#ff4d4f; } .track-details-h2{ font-weight:700; color:var(--text-primary); font-size:1.25rem; } .track-details-route-box{ background:rgba(255, 255, 255, 0.03); border-radius:12px; border:1px solid rgba(255, 255, 255, 0.05); } .track-details-label{ color:var(--text-muted); font-size:0.8rem; text-transform:uppercase; margin-bottom:0.75rem; letter-spacing:1px; } .track-details-label-sm{ color:var(--text-muted); font-size:0.8rem; text-transform:uppercase; margin-bottom:0.5rem; letter-spacing:1px; } .track-details-label-xs{ color:var(--text-muted); font-size:0.8rem; text-transform:uppercase; margin-bottom:0.2rem; letter-spacing:1px; } .track-details-city{ font-size:0.9rem; font-weight:600; color:var(--text-primary); } .track-details-dots{ flex:1; text-align:center; color:var(--border-color); font-size:1.2rem; } .track-details-address{ font-size:0.85rem; color:var(--text-secondary); } .track-details-name{ font-size:0.95rem; font-weight:600; color:var(--text-primary); } .track-details-weight{ font-size:1.1rem; font-weight:700; color:var(--text-primary); } .track-details-weight-unit{ font-size:0.8rem; font-weight:500; color:var(--text-secondary); } .track-details-date{ font-size:1.1rem; font-weight:700; color:var(--success); } .track-details-heading{ font-weight:700; color:var(--text-primary); font-size:1.25rem; } .track-details-route{ background:var(--bg-input); border-radius:12px; border:1px solid var(--border-color); } [data-theme="dark"] .track-details-route{ background:rgba(255, 255, 255, 0.03); border-color:rgba(255, 255, 255, 0.06); } .track-details-value{ font-size:0.95rem; font-weight:600; color:var(--text-primary); } .track-details-value-lg{ font-size:1.1rem; font-weight:700; color:var(--text-primary); } .track-details-value-success{ font-size:1.1rem; font-weight:700; color:var(--success); } .track-details-unit{ font-size:0.8rem; font-weight:500; color:var(--text-secondary); } .track-details-separator{ flex:0 0 auto; text-align:center; color:var(--text-muted); font-size:1.2rem; padding:0 0.5rem; } .track-details-hr{ border-color:var(--border-color); opacity:0.5; margin:0; } .track-address-info{ font-size:0.85rem; color:var(--text-secondary); } .border-color-important{ border-color:var(--border-color) !important; } .flex-1{ flex:1; } .track-feature-icon{ font-size:2.8rem; margin-bottom:1.5rem; } .track-feature-icon.primary{ color:var(--primary); } .track-feature-icon.accent{ color:var(--accent); } .track-feature-icon.success{ color:var(--success); } .track-feature-h3{ font-weight:800; font-family:'Plus Jakarta Sans', sans-serif; } @media (hover:hover) and (pointer:fine){ .bento-hover-glow:hover::before{ opacity:0.7; } .bento-hover-glow:hover{ transform:translateY(-6px) scale(1.01); box-shadow:0 24px 48px rgba(0, 0, 0, 0.1); } [data-theme="dark"] .bento-hover-glow:hover{ box-shadow:0 24px 60px rgba(0, 0, 0, 0.35); } } .bento-tag{ display:inline-flex; align-items:center; gap:0.35rem; padding:0.3rem 0.9rem; background:rgba(255, 77, 0, 0.1); border:1px solid rgba(255, 77, 0, 0.2); border-radius:100px; font-size:0.7rem; font-weight:700; color:var(--primary); text-transform:uppercase; letter-spacing:0.08em; margin-bottom:1.5rem; width:fit-content; } .bento-tag i{ font-size:0.65rem; } .bento-tag.tag-purple{ background:rgba(139, 92, 246, 0.1); border-color:rgba(139, 92, 246, 0.2); color:#8B5CF6; } .bento-hero{ grid-column:span 2; grid-row:span 2; } .bento-wide{ grid-column:span 2; grid-row:span 1; } .bento-small{ grid-column:span 1; grid-row:span 1; } @media (max-width:992px){ .bento-hero, .bento-wide, .bento-small{ grid-column:span 2; grid-row:auto; } } @media (max-width:768px){ .bento-hero, .bento-wide, .bento-small{ grid-column:span 1; } } .bento-inner{ position:relative; z-index:2; height:100%; display:flex; flex-direction:column; justify-content:flex-start; } .bento-flex-row{ flex-direction:row; align-items:center; gap:2rem; } @media (max-width:768px){ .bento-flex-row{ flex-direction:column; align-items:flex-start; gap:1.5rem; } .bento-wide .bento-content{ width:100%; text-align:left; } .bento-wide .bento-chart-gfx{ width:100%; margin-top:1rem; } } .bento-icon{ width:56px; height:56px; border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:1.5rem; margin-bottom:1.5rem; color:white; box-shadow:0 8px 24px rgba(0, 0, 0, 0.15); transition:transform 0.3s ease, box-shadow 0.3s ease; } @media (hover:hover) and (pointer:fine){ .bento-glass-card:hover .bento-icon{ transform:translateY(-2px) scale(1.05); box-shadow:0 12px 32px rgba(0, 0, 0, 0.2); } } .i-hero{ background:linear-gradient(135deg, var(--primary), var(--accent)); } .i-secure{ background:linear-gradient(135deg, #10B981, #059669); } .i-geo{ background:linear-gradient(135deg, #3B82F6, #2563EB); } .i-dashboard{ background:linear-gradient(135deg, #8B5CF6, #6D28D9); } .bento-glass-card h3{ font-family:'Plus Jakarta Sans', var(--font-family); font-weight:700; font-size:1.35rem; color:var(--text-primary); margin-bottom:0.7rem; line-height:1.3; } .bento-glass-card p{ font-size:0.95rem; color:var(--text-secondary); line-height:1.65; margin:0; } .bento-small p{ font-size:0.9rem; } .bento-stats-row{ margin-top:auto; padding-top:2rem; display:flex; align-items:center; gap:1.5rem; border-top:1px solid var(--border-color); } .bento-stat{ display:flex; flex-direction:column; gap:0.15rem; } .bento-stat .stat-number{ font-family:'Plus Jakarta Sans', var(--font-family); font-weight:800; font-size:1.6rem; color:var(--text-primary); line-height:1; background:linear-gradient(135deg, var(--primary), var(--accent)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; } .bento-stat .stat-label{ font-size:0.75rem; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.06em; } .bento-stat-divider{ width:1px; height:32px; background:var(--border-color); } .bento-chart-gfx{ display:flex; align-items:flex-end; gap:10px; height:110px; margin-left:auto; padding-right:10px; flex-shrink:0; } .chart-bar{ width:22px; background:linear-gradient(to top, var(--primary), var(--accent)); border-radius:6px 6px 2px 2px; opacity:0.75; animation:barPulse 2.5s infinite alternate ease-in-out; transform-origin:bottom; } .chart-bar.h-70{ height:70%; animation-delay:0s; } .chart-bar.h-40{ height:40%; animation-delay:0.2s; } .chart-bar.h-90{ height:90%; animation-delay:0.5s; } .chart-bar.h-50{ height:50%; animation-delay:0.1s; } .chart-bar.h-100{ height:100%; animation-delay:0.4s; } @keyframes barPulse{ 0%{ transform:scaleY(0.85); opacity:0.5; } 100%{ transform:scaleY(1.05); opacity:1; } } .pipe-section{ position:relative; } .pipeline-container{ max-width:900px; margin:0 auto; position:relative; padding:3rem 0; } .pipeline-container::before{ content:''; position:absolute; top:0; bottom:0; left:50%; width:4px; background:linear-gradient(to bottom, transparent, var(--primary), var(--accent), transparent); transform:translateX(-50%); opacity:0.3; border-radius:4px; } .pipe-row{ display:flex; justify-content:center; align-items:center; margin-bottom:4rem; position:relative; width:100%; } .pipe-row:last-child{ margin-bottom:0; } .pipe-node{ position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:24px; height:24px; background:var(--bg-body); border:4px solid var(--primary); border-radius:50%; z-index:2; display:flex; align-items:center; justify-content:center; box-shadow:0 0 15px rgba(255, 77, 0, 0.4); } .node-dot{ width:8px; height:8px; background:var(--accent); border-radius:50%; animation:pulse-dot 2s infinite; } .pipe-card{ width:42%; position:relative; padding:3rem 2.5rem; border-radius:24px; overflow:hidden; } .pair-left .pipe-card{ margin-right:auto; margin-left:0; } .pair-right .pipe-card{ margin-left:auto; margin-right:0; } .pair-left .pipe-card::after{ content:''; position:absolute; top:50%; right:-30px; width:30px; height:2px; background:var(--primary); opacity:0.3; } .pair-right .pipe-card::after{ content:''; position:absolute; top:50%; left:-30px; width:30px; height:2px; background:var(--primary); opacity:0.3; } .watermark-number{ position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); font-family:'Plus Jakarta Sans', var(--font-family); font-size:8rem; font-weight:800; color:var(--text-primary); opacity:0.03; line-height:1; pointer-events:none; transition:all 0.5s ease; } [data-theme="dark"] .watermark-number{ opacity:0.05; } .pair-right .watermark-number{ right:auto; left:50%; } .pipe-card:hover .watermark-number{ opacity:0.08; transform:translate(-50%, -50%) scale(1.05); } .pipe-card-content{ position:relative; z-index:2; } .pipe-card h4{ font-family:'Plus Jakarta Sans', var(--font-family); font-weight:700; font-size:1.4rem; color:var(--text-primary); margin-bottom:0.8rem; } .pipe-card p{ font-size:1.05rem; color:var(--text-secondary); line-height:1.6; margin:0; } @media (max-width:768px){ .pipeline-container::before{ left:20px; } .pipe-node{ left:20px; } .pipe-card{ width:80%; margin-left:60px !important; margin-right:0 !important; } .pipe-card::after{ display:none !important; } } .testimonials-section{ overflow:hidden; } .testimonial-stage{ --testimonial-gap:clamp(1rem, 1.8vw, 1.5rem); --testimonial-visible:3; width:100vw; margin-left:calc(50% - 50vw); padding-inline:clamp(1rem, 4vw, 3.75rem); } .testimonial-stage-shell{ position:relative; } .testimonial-viewport{ overflow:hidden; padding-block:0.5rem 0.25rem; padding-bottom:60px; } .testimonial-track{ display:flex; gap:var(--testimonial-gap); transition:transform 0.78s cubic-bezier(0.22, 1, 0.36, 1); will-change:transform; touch-action:pan-y; } .testimonial-track.is-dragging{ transition:none; cursor:grabbing; } .testimonial-slide{ flex:0 0 calc((100% - ((var(--testimonial-visible) - 1) * var(--testimonial-gap))) / var(--testimonial-visible)); min-width:0; } .testimonial-control{ position:absolute; top:50%; z-index:3; width:54px; height:54px; border-radius:50%; border:1px solid rgba(255, 77, 0, 0.18); background:rgba(255, 255, 255, 0.86); color:var(--text-primary); display:inline-flex; align-items:center; justify-content:center; box-shadow:0 20px 40px rgba(15, 23, 42, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.9); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); transform:translateY(-50%); transition:transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease; } .testimonial-control:hover{ transform:translateY(-50%) scale(1.04); border-color:rgba(255, 77, 0, 0.3); box-shadow:0 24px 48px rgba(15, 23, 42, 0.18), 0 0 0 6px rgba(255, 77, 0, 0.08); } .testimonial-control:focus-visible{ outline:none; box-shadow:0 0 0 4px rgba(255, 77, 0, 0.15); } .testimonial-control-prev{ left:clamp(0.25rem, 1vw, 1rem); } .testimonial-control-next{ right:clamp(0.25rem, 1vw, 1rem); } [data-theme="dark"] .testimonial-control{ background:rgba(20, 20, 28, 0.82); color:rgba(255, 255, 255, 0.92); border-color:rgba(255, 255, 255, 0.08); box-shadow:0 22px 42px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.06); } [data-theme="dark"] .testimonial-control:hover{ border-color:rgba(255, 136, 77, 0.28); box-shadow:0 28px 56px rgba(0, 0, 0, 0.48), 0 0 0 6px rgba(255, 77, 0, 0.08); } .testimonial-pagination{ display:flex; justify-content:center; align-items:center; gap:0.45rem; margin-top:-1.5rem; } .testimonial-dot{ width:10px; height:10px; padding:0; border:none; border-radius:999px; background:rgba(26, 29, 41, 0.16); transition:width 0.25s ease, background 0.25s ease, transform 0.25s ease; } .testimonial-dot:hover{ transform:scale(1.05); } [data-theme="dark"] .testimonial-dot.is-active{ background:linear-gradient(135deg, var(--primary), var(--accent)); } [data-theme="dark"] .testimonial-dot{ background:rgba(255, 255, 255, 0.18); } .testimonial-dot.is-active{ width:34px; background:linear-gradient(135deg, var(--primary), var(--accent)); } .testimonial-card-v2{ background:var(--glass-bg); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); border:1px solid var(--glass-border); border-radius:24px; padding:2.15rem 2rem; transition:all 0.45s cubic-bezier(0.16, 1, 0.3, 1); min-height:100%; position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; } .testimonial-content{ display:flex; flex-direction:column; gap:1rem; } .testimonial-meta-pill{ display:inline-flex; align-items:center; gap:0.45rem; padding:0.4rem 0.95rem; border-radius:999px; background:rgba(255, 77, 0, 0.08); border:1px solid rgba(255, 77, 0, 0.12); color:var(--primary); font-size:0.72rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; width:fit-content; } .testimonial-card-v2::after{ content:''; position:absolute; top:0; left:10%; right:10%; height:3px; border-radius:0 0 100px 100px; background:linear-gradient(90deg, transparent, var(--primary), var(--accent), transparent); opacity:0.5; transition:opacity 0.4s ease, left 0.4s ease, right 0.4s ease; } .testimonial-card-v2::before{ content:''; position:absolute; inset:0; border-radius:inherit; padding:2px; background:linear-gradient(135deg, var(--primary), transparent 40%, transparent 60%, var(--accent)); -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:opacity 0.5s ease; pointer-events:none; } .testimonial-card-v2:hover::before{ opacity:0.7; } .testimonial-card-v2:hover::after{ opacity:1; left:5%; right:5%; } .testimonial-card-v2:hover{ transform:translateY(-6px) scale(1.01); box-shadow:0 24px 48px rgba(0, 0, 0, 0.1); border-color:rgba(255, 77, 0, 0.15); } [data-theme="dark"] .testimonial-card-v2:hover{ box-shadow:0 24px 60px rgba(0, 0, 0, 0.35); } .testimonial-quote-icon{ position:absolute; top:1rem; right:1.5rem; font-size:3rem; color:var(--primary); opacity:0.08; line-height:1; transition:opacity 0.4s ease; } .testimonial-card-v2:hover .testimonial-quote-icon{ opacity:0.15; } .testimonial-stars{ color:#FFAA00; font-size:0.85rem; margin-bottom:1rem; display:flex; gap:0.15rem; } .testimonial-card-v2 blockquote{ font-size:1rem; color:var(--text-secondary); line-height:1.7; font-style:italic; margin-bottom:1.35rem; } .testimonial-author{ display:flex; align-items:center; gap:0.75rem; } .testimonial-avatar{ width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:0.9rem; color:#fff; flex-shrink:0; transition:transform 0.3s ease, box-shadow 0.3s ease; object-fit:cover; background-color:var(--glass-bg); } .testimonial-card-v2:hover .testimonial-avatar{ transform:scale(1.08); box-shadow:0 6px 20px rgba(255, 77, 0, 0.25); } .testimonial-name{ font-weight:700; color:var(--text-primary); font-size:0.9rem; } .testimonial-role{ font-size:0.78rem; color:var(--text-muted); } @media (max-width:991.98px){ .testimonial-stage{ --testimonial-visible:2; padding-inline:1rem; } .testimonial-control{ display:none; } } @media (max-width:575.98px){ .testimonial-stage{ --testimonial-visible:1; } .testimonial-card-v2{ padding:1.8rem 1.35rem; } .testimonial-card-v2 blockquote{ font-size:0.96rem; } } .stats-section{ position:relative; padding:6rem 0; overflow:hidden; background:var(--bg-body); } .stats-bg-glow{ position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:600px; height:600px; background:radial-gradient(circle, rgba(255, 77, 0, 0.08) 0%, transparent 70%); pointer-events:none; z-index:0; } [data-theme="dark"] .stats-bg-glow{ background:radial-gradient(circle, rgba(255, 77, 0, 0.12) 0%, transparent 70%); } .stats-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:1.5rem; } @media (max-width:992px){ .stats-grid{ grid-template-columns:repeat(2, 1fr); } } @media (max-width:576px){ .stats-grid{ grid-template-columns:1fr; } } .stat-card{ background:var(--glass-bg); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); border:1px solid var(--glass-border); border-radius:24px; padding:2rem 1.8rem; text-align:center; position:relative; overflow:hidden; transition:all 0.45s cubic-bezier(0.16, 1, 0.3, 1); } .stat-card::after{ content:''; position:absolute; top:0; left:10%; right:10%; height:3px; border-radius:0 0 100px 100px; background:linear-gradient(90deg, transparent, var(--primary), var(--accent), transparent); opacity:0.5; transition:opacity 0.4s ease, left 0.4s ease, right 0.4s ease; } .stat-card::before{ content:''; position:absolute; inset:0; border-radius:inherit; padding:2px; background:linear-gradient(135deg, var(--primary), transparent 40%, transparent 60%, var(--accent)); -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:opacity 0.5s ease; pointer-events:none; } .stat-card:hover::before{ opacity:0.7; } .stat-card:hover::after{ opacity:1; left:5%; right:5%; } .stat-card:hover{ transform:translateY(-6px) scale(1.01); box-shadow:0 24px 48px rgba(0, 0, 0, 0.1); border-color:rgba(255, 77, 0, 0.2); } [data-theme="dark"] .stat-card:hover{ box-shadow:0 24px 60px rgba(0, 0, 0, 0.35); } .stat-icon-wrap{ width:52px; height:52px; border-radius:14px; background:linear-gradient(135deg, var(--primary), var(--accent)); display:flex; align-items:center; justify-content:center; font-size:1.3rem; color:white; margin:0 auto 1.2rem; box-shadow:0 6px 20px rgba(255, 77, 0, 0.25); } .stat-icon-wrap.icon-blue{ background:linear-gradient(135deg, #3B82F6, #2563EB); box-shadow:0 6px 20px rgba(59, 130, 246, 0.25); } .stat-icon-wrap.icon-green{ background:linear-gradient(135deg, #10B981, #059669); box-shadow:0 6px 20px rgba(16, 185, 129, 0.25); } .stat-icon-wrap.icon-purple{ background:linear-gradient(135deg, #8B5CF6, #6D28D9); box-shadow:0 6px 20px rgba(139, 92, 246, 0.25); } .stat-card .stat-value{ font-family:'Plus Jakarta Sans', var(--font-family); font-weight:800; font-size:2.8rem; line-height:1; display:inline; background:linear-gradient(135deg, var(--text-primary), var(--text-secondary)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; } .stat-card .stat-suffix{ font-family:'Plus Jakarta Sans', var(--font-family); font-weight:700; font-size:1.6rem; color:var(--primary); display:inline; margin-left:2px; } .stat-card .stat-title{ font-size:0.85rem; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.06em; margin-top:0.6rem; margin-bottom:1.2rem; } .stat-bar{ width:100%; height:4px; background:var(--border-color); border-radius:100px; overflow:hidden; } .stat-bar-fill{ height:100%; width:0; background:linear-gradient(90deg, var(--primary), var(--accent)); border-radius:100px; transition:width 1.5s cubic-bezier(0.16, 1, 0.3, 1); } .stat-bar-fill.bar-blue{ background:linear-gradient(90deg, #3B82F6, #60A5FA); } .stat-bar-fill.bar-green{ background:linear-gradient(90deg, #10B981, #34D399); } .stat-bar-fill.bar-purple{ background:linear-gradient(90deg, #8B5CF6, #A78BFA); } .stat-card.reveal-visible .stat-bar-fill{ width:var(--fill-width); } .platform-section{ position:relative; background-attachment:fixed; background-position:center; background-repeat:no-repeat; background-size:cover; overflow:hidden; } .platform-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:1.5rem; } @media (max-width:992px){ .platform-grid{ grid-template-columns:1fr; } } .platform-card{ background:var(--glass-bg); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border:1px solid var(--glass-border); border-radius:24px; padding:2.5rem 2rem; position:relative; overflow:hidden; transition:all 0.45s cubic-bezier(0.16, 1, 0.3, 1); } .platform-card::before{ content:''; position:absolute; inset:0; border-radius:inherit; padding:2px; background:linear-gradient(135deg, var(--primary), transparent 50%, var(--accent)); -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:opacity 0.4s ease; pointer-events:none; } .platform-card:hover::before{ opacity:0.6; } .platform-card:hover{ transform:translateY(-8px); box-shadow:0 24px 48px rgba(0, 0, 0, 0.1); } [data-theme="dark"] .platform-card:hover{ box-shadow:0 24px 48px rgba(0, 0, 0, 0.35); } .platform-icon-wrap{ width:60px; height:60px; border-radius:18px; background:linear-gradient(135deg, var(--primary), var(--accent)); display:flex; align-items:center; justify-content:center; font-size:1.6rem; color:white; margin-bottom:1.5rem; box-shadow:0 8px 24px rgba(255, 77, 0, 0.25); transition:transform 0.3s ease; } .platform-card:hover .platform-icon-wrap{ transform:scale(1.08); } .platform-icon-wrap.icon-blue{ background:linear-gradient(135deg, #3B82F6, #2563EB); box-shadow:0 8px 24px rgba(59, 130, 246, 0.25); } .platform-icon-wrap.icon-purple{ background:linear-gradient(135deg, #8B5CF6, #6D28D9); box-shadow:0 8px 24px rgba(139, 92, 246, 0.25); } .platform-card h3{ font-family:'Plus Jakarta Sans', var(--font-family); font-weight:700; font-size:1.35rem; color:var(--text-primary); margin-bottom:0.7rem; } .platform-card p{ font-size:0.95rem; color:var(--text-secondary); line-height:1.65; margin-bottom:1.5rem; } .platform-card-tag{ display:inline-flex; align-items:center; padding:0.3rem 0.9rem; background:rgba(255, 77, 0, 0.1); border:1px solid rgba(255, 77, 0, 0.2); border-radius:100px; font-size:0.7rem; font-weight:700; color:var(--primary); text-transform:uppercase; letter-spacing:0.08em; } .platform-card-tag.tag-blue{ background:rgba(59, 130, 246, 0.1); border-color:rgba(59, 130, 246, 0.2); color:#3B82F6; } .platform-card-tag.tag-purple{ background:rgba(139, 92, 246, 0.1); border-color:rgba(139, 92, 246, 0.2); color:#8B5CF6; } .faq-section{ position:relative; } .faq-contact-btn{ display:inline-flex; align-items:center; padding:0.75rem 1.8rem; background:linear-gradient(135deg, var(--primary), var(--accent)); color:#fff; font-weight:600; font-size:0.9rem; border-radius:14px; text-decoration:none; margin-top:1.5rem; box-shadow:0 8px 24px rgba(255, 77, 0, 0.25); transition:all 0.3s ease; } .faq-contact-btn:hover{ transform:translateY(-2px); box-shadow:0 12px 32px rgba(255, 77, 0, 0.35); color:#fff; } .faq-accordion{ display:flex; flex-direction:column; gap:0.75rem; } .faq-item{ background:var(--glass-bg); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border:1px solid var(--glass-border); border-radius:18px; overflow:hidden; transition:all 0.35s ease; } .faq-item:hover{ border-color:rgba(255, 77, 0, 0.15); } .faq-item.active{ border-color:rgba(255, 77, 0, 0.25); box-shadow:0 8px 32px rgba(255, 77, 0, 0.06); } .faq-question{ display:flex; justify-content:space-between; align-items:center; width:100%; padding:1.2rem 1.5rem; background:none; border:none; cursor:pointer; gap:1rem; transition:all 0.3s ease; } .faq-question span{ font-family:'Plus Jakarta Sans', var(--font-family); font-weight:600; font-size:1rem; color:var(--text-primary); text-align:left; line-height:1.4; } .faq-icon{ font-size:1.1rem; color:var(--primary); transition:transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); flex-shrink:0; width:28px; height:28px; display:flex; align-items:center; justify-content:center; background:rgba(255, 77, 0, 0.08); border-radius:8px; } .faq-item.active .faq-icon{ transform:rotate(45deg); background:rgba(255, 77, 0, 0.15); } .faq-answer{ max-height:0; overflow:hidden; transition:max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), padding 0.4s ease; padding:0 1.5rem; } .faq-item.active .faq-answer{ max-height:200px; padding:0 1.5rem 1.2rem; } .faq-answer p{ font-size:0.92rem; color:var(--text-secondary); line-height:1.7; margin:0; } .faq-answer strong{ color:var(--primary); font-weight:600; } .cta-section-v2{ padding:5rem 0 7rem; } .cta-card{ background:linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%); border-radius:24px; padding:5rem 3rem; text-align:center; color:#fff; position:relative; overflow:hidden; border:1px solid rgba(255, 255, 255, 0.06); } [data-theme="light"] .cta-card{ background:linear-gradient(135deg, var(--primary) 0%, #E64500 50%, var(--accent) 100%); } .cta-card h2{ font-family:'Plus Jakarta Sans', var(--font-family); font-weight:800; font-size:clamp(1.8rem, 3vw, 2.5rem); margin-bottom:0.85rem; letter-spacing:-0.02em; } .cta-card h2 .headline-gradient{ background:linear-gradient(135deg, var(--accent) 0%, #FF6B6B 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; } [data-theme="light"] .cta-card h2 .headline-gradient{ background:none; -webkit-text-fill-color:#fff; } .cta-card p{ max-width:500px; margin:0 auto 2.5rem; opacity:0.8; font-size:1.05rem; line-height:1.7; } .cta-particles span{ position:absolute; width:6px; height:6px; background:rgba(255, 255, 255, 0.15); border-radius:50%; animation:particleFloat 8s linear infinite; } .cta-particles span:nth-child(1){ left:10%; top:20%; animation-delay:0s; animation-duration:7s; } .cta-particles span:nth-child(2){ left:25%; top:60%; animation-delay:1s; animation-duration:9s; width:4px; height:4px; } .cta-particles span:nth-child(3){ left:70%; top:30%; animation-delay:2s; animation-duration:8s; } .cta-particles span:nth-child(4){ left:80%; top:70%; animation-delay:3s; animation-duration:6s; width:8px; height:8px; } .cta-particles span:nth-child(5){ left:50%; top:10%; animation-delay:1.5s; animation-duration:10s; width:3px; height:3px; } @keyframes particleFloat{ 0%{ transform:translateY(0) rotate(0deg); opacity:0.15; } 50%{ opacity:0.4; } 100%{ transform:translateY(-80px) rotate(180deg); opacity:0; } } .cta-action-btn{ display:inline-flex; align-items:center; gap:1rem; background:#fff; color:var(--primary); border:none; border-radius:60px; padding:1rem 2.5rem; font-weight:700; font-size:1rem; text-decoration:none; transition:var(--transition); font-family:'Plus Jakarta Sans', var(--font-family); } .cta-action-btn:hover{ transform:translateY(-2px) scale(1.02); box-shadow:0 8px 24px rgba(0, 0, 0, 0.15); color:var(--primary); } .cta-action-btn i.bi-arrow-right{ transition:transform 0.3s ease; } .cta-action-btn:hover i.bi-arrow-right{ transform:translateX(4px); } .stat-counter-card{ text-align:center; padding:2.5rem 1.5rem; background:var(--glass-bg); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); border:1px solid var(--glass-border); border-radius:24px; position:relative; overflow:hidden; transition:all 0.45s cubic-bezier(0.16, 1, 0.3, 1); } .stat-counter-card::after{ content:''; position:absolute; top:0; left:10%; right:10%; height:3px; border-radius:0 0 100px 100px; background:linear-gradient(90deg, transparent, var(--primary), var(--accent), transparent); opacity:0.5; transition:opacity 0.4s ease, left 0.4s ease, right 0.4s ease; } .stat-counter-card:hover::after{ opacity:1; left:5%; right:5%; } .stat-counter-card:hover{ transform:translateY(-6px) scale(1.01); box-shadow:0 24px 48px rgba(0, 0, 0, 0.1); border-color:rgba(255, 77, 0, 0.2); } [data-theme="dark"] .stat-counter-card:hover{ box-shadow:0 24px 60px rgba(0, 0, 0, 0.35); } .stat-counter-card h2{ font-family:'Plus Jakarta Sans', var(--font-family); font-weight:800; font-size:2.8rem; background:linear-gradient(135deg, var(--primary), var(--accent)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin-bottom:0.25rem; } .stat-counter-card .suffix{ font-size:1.5rem; -webkit-text-fill-color:var(--accent); } .stat-counter-card p{ font-weight:600; color:var(--text-secondary); font-size:0.9rem; text-transform:uppercase; letter-spacing:0.06em; } .service-card{ background:var(--glass-bg); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); border:1px solid var(--glass-border); border-radius:24px; padding:2.5rem 2rem; transition:all 0.45s cubic-bezier(0.16, 1, 0.3, 1); height:100%; position:relative; overflow:hidden; display:flex; flex-direction:column; gap:1.25rem; box-shadow:0 18px 34px rgba(15, 23, 42, 0.06); } [data-theme="dark"] .service-card{ box-shadow:0 18px 40px rgba(0, 0, 0, 0.22); } .service-card::after{ content:''; position:absolute; top:0; left:10%; right:10%; height:3px; border-radius:0 0 100px 100px; background:linear-gradient(90deg, transparent, var(--primary), var(--accent), transparent); opacity:0.5; transition:opacity 0.4s ease, left 0.4s ease, right 0.4s ease; } .service-card::before{ content:''; position:absolute; inset:0; border-radius:inherit; padding:2px; background:linear-gradient(135deg, var(--primary), transparent 40%, transparent 60%, var(--accent)); -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:opacity 0.5s ease; pointer-events:none; } .service-card:hover::before{ opacity:0.7; } .service-card:hover::after{ opacity:1; left:5%; right:5%; } .service-card:hover{ transform:translateY(-6px) scale(1.01); box-shadow:0 24px 48px rgba(0, 0, 0, 0.1); } [data-theme="dark"] .service-card:hover{ box-shadow:0 24px 60px rgba(0, 0, 0, 0.35); } .service-card .service-icon{ width:60px; height:60px; border-radius:16px; display:inline-flex; align-items:center; justify-content:center; font-size:1.5rem; color:#fff; margin-bottom:0; box-shadow:0 8px 24px rgba(0, 0, 0, 0.15); transition:transform 0.3s ease, box-shadow 0.3s ease; flex-shrink:0; } .service-card:hover .service-icon{ transform:translateY(-2px) scale(1.05); box-shadow:0 12px 32px rgba(0, 0, 0, 0.2); } .service-card h3{ font-family:'Plus Jakarta Sans', var(--font-family); font-weight:700; font-size:1.35rem; color:var(--text-primary); margin-bottom:0.7rem; line-height:1.3; } .service-card h4{ font-weight:700; color:var(--text-primary); margin-bottom:0.6rem; } .service-card p{ font-size:0.92rem; color:var(--text-secondary); line-height:1.65; } .service-card-head{ display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:1rem; } .service-card-head .service-meta{ margin-bottom:0; flex:0 0 auto; min-width:0; max-width:100%; } .service-card-copy{ display:grid; gap:0.75rem; } .service-card-copy h3, .service-card-copy p{ margin:0; } .service-card, .contact-card, .mission-card, .value-card, .feature-card, .platform-card, .stat-counter-card, .timeline-bento-card, .track-summary-card, .story-content{ min-width:0; isolation:isolate; } .service-card>*, .contact-card>*, .mission-card>*, .value-card>*, .feature-card>*, .platform-card>*, .stat-counter-card>*, .timeline-bento-card>*, .track-summary-card>*, .story-content>*{ position:relative; z-index:1; min-width:0; } .service-card h3, .service-card h4, .service-card p, .service-card li, .contact-card h2, .contact-card h3, .contact-card p, .mission-card h3, .mission-card p, .value-card h3, .value-card h5, .value-card p, .feature-card h3, .feature-card h4, .feature-card p, .platform-card h3, .platform-card p, .platform-card-tag, .track-summary-value, .track-summary-support, .story-content h2, .story-content p, .story-points span, .story-points strong{ overflow-wrap:anywhere; } .service-list li, .story-points li, .contact-info-item, .feature-card-row{ min-width:0; } .service-list li span, .story-points li div, .contact-info-item div, .feature-card-row>div:last-child{ min-width:0; } .contact-strips-section{ margin-top:-2rem; position:relative; z-index:2; } .contact-strip{ display:flex; align-items:flex-start; gap:1rem; padding:1.35rem 1.25rem; border-radius:18px; background:var(--glass-bg); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border:1px solid var(--border-color); box-shadow:var(--shadow-sm); transition:var(--transition); height:100%; } .contact-strip:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:rgba(255, 77, 0, 0.15); } .contact-strip-icon{ width:44px; height:44px; min-width:44px; border-radius:13px; display:flex; align-items:center; justify-content:center; font-size:1.1rem; color:#fff; background:linear-gradient(135deg, var(--primary), var(--accent)); box-shadow:0 6px 18px rgba(255, 77, 0, 0.25); flex-shrink:0; } .contact-strip-icon.icon-blue{ background:linear-gradient(135deg, #3B82F6, #60A5FA); box-shadow:0 6px 18px rgba(59, 130, 246, 0.25); } .contact-strip-icon.icon-green{ background:linear-gradient(135deg, #10B981, #34D399); box-shadow:0 6px 18px rgba(16, 185, 129, 0.25); } .contact-strip-icon.icon-purple{ background:linear-gradient(135deg, #8B5CF6, #A78BFA); box-shadow:0 6px 18px rgba(139, 92, 246, 0.25); } .contact-strip h4{ font-size:0.92rem; font-weight:700; color:var(--text-primary); margin:0 0 0.25rem; } .contact-strip p{ font-size:0.84rem; color:var(--text-secondary); margin:0; line-height:1.55; } .contact-card{ background:var(--glass-bg); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); border:1px solid var(--border-color); border-radius:24px; padding:2.5rem; box-shadow:var(--shadow-sm); position:relative; overflow:hidden; transition:var(--transition); } .contact-card::after{ content:''; position:absolute; top:0; left:10%; right:10%; height:3px; border-radius:0 0 100px 100px; background:linear-gradient(90deg, transparent, var(--primary), var(--accent), transparent); opacity:0.5; transition:opacity 0.4s ease; } .contact-card:hover{ box-shadow:var(--shadow-md); border-color:rgba(255, 77, 0, 0.12); } .contact-card:hover::after{ opacity:0.85; } .contact-card-header{ margin-bottom:2rem; } .contact-card-header .section-badge{ margin-bottom:0.85rem; } .contact-card-header h2{ font-family:'Plus Jakarta Sans', var(--font-family); font-size:clamp(1.45rem, 2.5vw, 1.75rem); font-weight:800; color:var(--text-primary); line-height:1.2; margin:0; } .contact-form-label{ font-weight:600; color:var(--text-primary); font-size:0.88rem; margin-bottom:0.4rem; } .contact-form{ position:relative; } .contact-textarea{ height:auto; resize:vertical; min-height:130px; } .btn-submit-contact{ padding:0.85rem 2.5rem; border-radius:50px; font-size:0.95rem; } .contact-map-card{ border-radius:24px; overflow:hidden; border:1px solid var(--border-color); background:var(--glass-bg); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); box-shadow:var(--shadow-sm); transition:var(--transition); } .contact-map-card:hover{ box-shadow:var(--shadow-md); border-color:rgba(255, 77, 0, 0.12); } .contact-map-header{ display:flex; align-items:center; gap:0.6rem; padding:1rem 1.5rem; border-bottom:1px solid var(--border-color); font-size:0.92rem; font-weight:700; color:var(--text-primary); } .contact-map-header i{ color:var(--primary); font-size:1.1rem; } .contact-map{ border-radius:0; overflow:hidden; } .contact-map iframe{ width:100%; height:320px; border:0; filter:grayscale(20%); transition:filter 0.4s ease; display:block; } .contact-map iframe:hover{ filter:grayscale(0%); } .contact-social-card{ margin-top:1.25rem; padding:1.5rem; border-radius:20px; background:var(--glass-bg); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border:1px solid var(--border-color); box-shadow:var(--shadow-sm); text-align:center; } .contact-social-card h4{ font-size:0.95rem; font-weight:700; color:var(--text-primary); margin:0 0 1rem; } .contact-social-links{ display:flex; justify-content:center; gap:0.75rem; } .contact-social-links a{ width:44px; height:44px; border-radius:13px; display:inline-flex; align-items:center; justify-content:center; font-size:1.15rem; color:var(--text-secondary); background:rgba(148, 163, 184, 0.08); border:1px solid var(--border-color); transition:var(--transition); } .contact-social-links a:hover{ color:#fff; background:var(--gradient-primary); border-color:var(--primary); transform:translateY(-3px); box-shadow:0 8px 20px rgba(255, 77, 0, 0.3); } @media (max-width:991.98px){ .contact-strips-section{ margin-top:0; } .contact-card{ padding:2rem 1.5rem; } } @media (max-width:575.98px){ .contact-card{ padding:1.5rem 1.25rem; } .contact-strip{ padding:1rem; } } .pub-footer{ background:var(--bg-card-solid); border-top:1px solid var(--border-color); padding:4rem 0 0; } .pub-footer h5{ font-weight:700; font-size:1rem; color:var(--text-primary); margin-bottom:1.25rem; } .pub-footer p, .pub-footer a{ font-size:0.9rem; color:var(--text-secondary); line-height:1.8; } .pub-footer a{ display:block; text-decoration:none; transition:var(--transition); } .pub-footer a:hover{ color:var(--primary); padding-left:4px; } .pub-footer .footer-brand{ font-family:'Plus Jakarta Sans', var(--font-family); font-weight:800; font-size:1.25rem; color:var(--text-primary); display:flex; align-items:center; gap:0.5rem; margin-bottom:0.75rem; } .pub-footer .footer-brand .brand-dot-footer{ width:32px; height:32px; background:linear-gradient(135deg, var(--primary), var(--accent)); border-radius:8px; display:inline-flex; align-items:center; justify-content:center; } .pub-footer .footer-brand .brand-dot-footer i{ color:#fff; font-size:0.95rem; } .footer-social{ display:flex; gap:0.75rem; margin-top:1rem; } .footer-social a{ display:inline-flex !important; width:40px; height:40px; border-radius:10px; background:var(--bg-input); border:1px solid var(--border-color); align-items:center; justify-content:center; font-size:1rem; color:var(--text-secondary); transition:var(--transition); padding:0; } .footer-social a:hover{ background:var(--primary); color:#fff; border-color:var(--primary); transform:translateY(-3px); } .footer-newsletter{ display:flex; border-radius:50px; overflow:hidden; border:1px solid var(--border-color); background:var(--bg-input); } .footer-newsletter input{ flex:1; padding:0.6rem 1rem; border:none; background:transparent; color:var(--text-primary); font-size:0.85rem; outline:none; } .footer-newsletter input::placeholder{ color:var(--text-muted); } .footer-newsletter button{ background:linear-gradient(135deg, var(--primary), var(--accent)); color:#fff; border:none; padding:0.6rem 1.25rem; font-weight:600; font-size:0.85rem; cursor:pointer; transition:var(--transition); } .footer-newsletter button:hover{ opacity:0.9; } .footer-bottom{ border-top:1px solid var(--border-color); margin-top:3rem; padding:1.5rem 0; text-align:center; font-size:0.82rem; color:var(--text-muted); } .footer-bottom p{ display:flex; align-items:center; justify-content:center; gap:0.5rem; } .gradient-text{ background:linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; } .cta-section{ padding:5rem 0 6rem; position:relative; } .cta-box{ background:linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%); border-radius:24px; padding:4.5rem 3rem; text-align:center; color:#fff; position:relative; overflow:hidden; border:1px solid rgba(255, 255, 255, 0.06); box-shadow:0 24px 64px rgba(0, 0, 0, 0.25); } [data-theme="light"] .cta-box{ background:linear-gradient(135deg, var(--primary) 0%, #E64500 50%, var(--accent) 100%); box-shadow:0 24px 64px rgba(255, 77, 0, 0.2); } .cta-box::before{ content:''; position:absolute; width:300px; height:300px; background:radial-gradient(circle, rgba(255, 193, 7, 0.15) 0%, transparent 70%); top:-100px; right:-100px; border-radius:50%; pointer-events:none; } .cta-box::after{ content:''; position:absolute; width:250px; height:250px; background:radial-gradient(circle, rgba(255, 77, 0, 0.1) 0%, transparent 70%); bottom:-80px; left:-80px; border-radius:50%; pointer-events:none; } .cta-box h2{ font-family:'Plus Jakarta Sans', var(--font-family); font-weight:800; font-size:clamp(1.8rem, 3vw, 2.5rem); margin-bottom:0.85rem; letter-spacing:-0.02em; position:relative; z-index:1; } .cta-box p{ max-width:500px; margin:0 auto 2.5rem; opacity:0.85; font-size:1.05rem; line-height:1.7; position:relative; z-index:1; } .cta-btn{ display:inline-flex; align-items:center; gap:0.6rem; background:#fff; color:var(--primary); border:none; border-radius:60px; padding:1rem 2.5rem; font-weight:700; font-size:1rem; text-decoration:none; transition:all 0.35s cubic-bezier(0.16, 1, 0.3, 1); font-family:'Plus Jakarta Sans', var(--font-family); position:relative; z-index:1; box-shadow:0 4px 16px rgba(0, 0, 0, 0.1); } .cta-btn:hover{ transform:translateY(-3px) scale(1.03); box-shadow:0 8px 28px rgba(0, 0, 0, 0.18); color:var(--primary); } .cta-btn i{ font-size:1.1rem; } .page-hero{ padding:10rem 0 5rem; text-align:center; position:relative; overflow:hidden; } .page-hero::before{ content:''; position:absolute; width:500px; height:500px; background:radial-gradient(circle, var(--primary) 0%, transparent 70%); opacity:0.06; top:-200px; left:50%; transform:translateX(-50%); border-radius:50%; pointer-events:none; } .page-hero h1{ font-family:'Plus Jakarta Sans', var(--font-family); font-weight:800; font-size:clamp(2rem, 4vw, 3rem); color:var(--text-primary); letter-spacing:-0.02em; margin-bottom:0.75rem; } .page-hero p{ font-size:1.1rem; color:var(--text-secondary); max-width:500px; margin:0 auto; } .page-hero-extra{ max-width:760px; margin:1.9rem auto 0; position:relative; z-index:1; } .page-hero-extra .hero-tracker-wrap{ margin:0 auto 1rem; } .page-hero-premium{ padding:10rem 0 6rem; } .page-hero-premium .container{ position:relative; z-index:2; } .page-hero-panel{ max-width:980px; margin:0 auto; padding:clamp(2rem, 4vw, 3.25rem); border-radius:32px; background:var(--glass-bg); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); border:1px solid var(--glass-border); box-shadow:0 24px 60px rgba(0, 0, 0, 0.08); overflow:hidden; position:relative; } [data-theme="dark"] .page-hero-panel{ box-shadow:0 28px 70px rgba(0, 0, 0, 0.3); } .page-hero-panel::before{ content:''; position:absolute; inset:0; background: radial-gradient(circle at top right, rgba(255, 77, 0, 0.16), transparent 36%), radial-gradient(circle at bottom left, rgba(255, 193, 7, 0.14), transparent 34%); pointer-events:none; } .page-hero-panel::after{ content:''; position:absolute; top:0; left:12%; right:12%; height:3px; border-radius:0 0 999px 999px; background:linear-gradient(90deg, transparent, var(--primary), var(--accent), transparent); opacity:0.85; } .page-hero-copy{ max-width:760px; margin:0 auto; position:relative; z-index:1; } .page-hero-description{ font-size:1.1rem; color:var(--text-secondary); max-width:700px; margin:0 auto; line-height:1.75; } .page-hero-metrics{ display:flex; justify-content:center; flex-wrap:wrap; gap:1rem; margin-top:2rem; } .page-hero-metric{ min-width:170px; padding:0.95rem 1.15rem; border-radius:20px; background:rgba(255, 255, 255, 0.52); border:1px solid rgba(255, 255, 255, 0.35); box-shadow:0 14px 30px rgba(15, 23, 42, 0.08); text-align:left; } [data-theme="dark"] .page-hero-metric{ background:rgba(15, 23, 42, 0.55); border-color:rgba(255, 255, 255, 0.08); box-shadow:0 18px 34px rgba(0, 0, 0, 0.24); } .page-hero-metric strong{ display:block; font-family:'Plus Jakarta Sans', var(--font-family); font-weight:800; font-size:1.15rem; color:var(--text-primary); margin-bottom:0.18rem; } .page-hero-metric span{ display:block; font-size:0.84rem; line-height:1.5; color:var(--text-secondary); } .about-split-section .section-badge{ margin-bottom:1.25rem; } .about-split-section .section-title{ margin-bottom:1.25rem; } .about-copy{ font-size:1.05rem; line-height:1.8; color:var(--text-secondary); margin-bottom:1.75rem; max-width:520px; } .about-img-frame{ position:relative; border-radius:24px; overflow:hidden; border:1px solid var(--border-color); box-shadow:var(--shadow-lg); background:linear-gradient(135deg, rgba(255, 237, 213, 0.4), rgba(219, 234, 254, 0.4)); } [data-theme="dark"] .about-img-frame{ background:linear-gradient(135deg, rgba(30, 20, 10, 0.4), rgba(20, 25, 50, 0.4)); border-color:rgba(255, 255, 255, 0.06); } .about-img-frame img{ width:100%; height:100%; min-height:380px; object-fit:cover; display:block; transition:transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); } @media (hover:hover) and (pointer:fine){ .about-img-frame:hover img{ transform:scale(1.03); } } .about-checklist{ display:flex; flex-direction:column; gap:0.85rem; } .about-check-item{ display:flex; align-items:center; gap:0.85rem; padding:0.65rem 1rem; border-radius:14px; background:var(--glass-bg); border:1px solid var(--border-color); transition:var(--transition); } .about-check-item:hover{ border-color:rgba(255, 77, 0, 0.2); transform:translateX(4px); } .about-check-item i{ width:34px; height:34px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; background:rgba(255, 77, 0, 0.1); color:var(--primary); font-size:0.9rem; } .about-check-item span{ font-size:0.95rem; font-weight:500; color:var(--text-primary); line-height:1.4; } .about-impact-section .section-header{ margin-bottom:3rem; } .about-stats-grid{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:1.25rem; } .about-values-section .section-header{ margin-bottom:3.5rem; } .about-values-grid{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:1.5rem; } @media (max-width:991.98px){ .about-stats-grid, .about-values-grid{ grid-template-columns:repeat(2, 1fr); } .about-img-frame img{ min-height:300px; } } @media (max-width:575.98px){ .about-stats-grid{ grid-template-columns:1fr 1fr; gap:1rem; } .about-values-grid{ grid-template-columns:1fr; } .about-img-frame img{ min-height:240px; } .about-check-item{ padding:0.55rem 0.85rem; } } .services-catalog-grid{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:1.5rem; margin-top:2.5rem; } .service-meta{ display:inline-flex; align-items:center; gap:0.45rem; margin-bottom:1rem; padding:0.35rem 0.8rem; border-radius:999px; background:rgba(255, 77, 0, 0.1); border:1px solid rgba(255, 77, 0, 0.18); color:var(--primary); font-size:0.72rem; font-weight:800; text-transform:uppercase; letter-spacing:0.08em; } .service-list{ list-style:none; margin:auto 0 0; padding:0; padding-top:1rem; display:grid; gap:0.7rem; border-top:1px solid rgba(148, 163, 184, 0.18); } [data-theme="dark"] .service-list{ border-top-color:rgba(255, 255, 255, 0.08); } .service-list li{ display:flex; gap:0.7rem; align-items:flex-start; color:var(--text-secondary); font-size:0.9rem; line-height:1.55; } .service-list i{ color:var(--primary); margin-top:0.12rem; } .service-icon-amber{ background:linear-gradient(135deg, #FF6B35, #FFC107); } .service-icon-blue{ background:linear-gradient(135deg, #2563EB, #38BDF8); } .service-icon-green{ background:linear-gradient(135deg, #10B981, #34D399); } .service-icon-slate{ background:linear-gradient(135deg, #334155, #0F172A); } .service-icon-red{ background:linear-gradient(135deg, #EF4444, #F97316); } .service-icon-violet{ background:linear-gradient(135deg, #7C3AED, #A855F7); } .service-lanes-grid{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:1.5rem; margin-top:2.25rem; } .track-search-card{ overflow:hidden; } .track-search-card::before{ content:''; position:absolute; inset:0; background: radial-gradient(circle at top right, rgba(255, 77, 0, 0.14), transparent 38%), radial-gradient(circle at bottom left, rgba(59, 130, 246, 0.12), transparent 34%); pointer-events:none; } .track-search-card::after{ content:''; position:absolute; top:0; left:10%; right:10%; height:3px; border-radius:0 0 999px 999px; background:linear-gradient(90deg, transparent, var(--primary), var(--accent), transparent); opacity:0.85; } .track-search-card>*{ position:relative; z-index:1; } .track-search-copy{ max-width:760px; margin:0 auto; } .track-search-title{ font-size:clamp(2rem, 4vw, 3rem); line-height:1.05; letter-spacing:-0.03em; } .track-search-desc{ color:var(--text-secondary); line-height:1.75; max-width:560px; margin-inline:auto; } .track-search-highlights{ display:flex; justify-content:center; flex-wrap:wrap; gap:0.75rem; margin-top:1.5rem; } .track-search-highlight{ display:inline-flex; align-items:center; justify-content:center; gap:0.5rem; padding:0.8rem 1rem; border-radius:999px; background:rgba(255, 255, 255, 0.58); border:1px solid rgba(255, 255, 255, 0.34); box-shadow:0 12px 24px rgba(15, 23, 42, 0.06); color:var(--text-primary); font-size:0.88rem; font-weight:700; } [data-theme="dark"] .track-search-highlight{ background:rgba(15, 23, 42, 0.56); border-color:rgba(255, 255, 255, 0.08); box-shadow:0 12px 24px rgba(0, 0, 0, 0.2); } .track-search-highlight i{ color:var(--primary); } .track-search-metrics{ display:flex; justify-content:center; flex-wrap:wrap; gap:1rem; margin-top:2rem; } .track-search-metric{ min-width:165px; padding:0.95rem 1.1rem; border-radius:18px; background:rgba(255, 255, 255, 0.52); border:1px solid rgba(255, 255, 255, 0.32); box-shadow:0 14px 28px rgba(15, 23, 42, 0.08); text-align:left; } [data-theme="dark"] .track-search-metric{ background:rgba(15, 23, 42, 0.52); border-color:rgba(255, 255, 255, 0.08); } .track-search-metric strong{ display:block; color:var(--text-primary); font-family:'Plus Jakarta Sans', var(--font-family); font-size:1rem; font-weight:800; margin-bottom:0.12rem; } .track-search-metric span{ display:block; color:var(--text-secondary); font-size:0.82rem; } .track-feature-card{ text-align:left; } .track-feature-card .service-meta{ margin-bottom:0.9rem; } @media (max-width:1199.98px){ .about-values-grid, .about-stats-grid, .services-catalog-grid, .service-lanes-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); } } @media (max-width:991.98px){ .page-hero-panel{ padding:2rem 1.35rem; border-radius:26px; } .story-grid{ grid-template-columns:1fr; } .story-grid-reverse .story-content, .story-grid-reverse .story-visual{ order:initial; } .story-visual img{ min-height:360px; } .track-summary-grid{ grid-template-columns:1fr; } } @media (max-width:767.98px){ .page-hero-metrics, .track-search-metrics{ gap:0.75rem; } .page-hero-metric, .track-search-metric{ min-width:calc(50% - 0.5rem); } .about-stats-grid, .about-values-grid, .services-catalog-grid, .service-lanes-grid{ grid-template-columns:1fr; } .track-status-banner{ flex-direction:column; } .track-search-highlights{ gap:0.65rem; } .track-search-highlight{ width:calc(50% - 0.35rem); min-width:0; } } @media (max-width:575.98px){ .page-hero-premium{ padding-top:8.5rem; padding-bottom:4rem; } .page-hero-description, .track-search-desc{ font-size:0.98rem; } .page-hero-metric, .track-search-metric{ width:100%; min-width:0; } .track-search-highlight{ width:100%; } .story-content{ padding:1.5rem 1.2rem; border-radius:24px; } .story-visual, .story-visual img{ border-radius:24px; } .story-visual img{ min-height:300px; } .contact-card, .service-card, .mission-card, .value-card, .feature-card, .platform-card, .timeline-bento-card, .track-summary-card{ padding:1.5rem 1.2rem; border-radius:20px; } .feature-card-row{ flex-direction:column; gap:1rem; } .contact-info-item{ gap:0.85rem; } } .mission-card{ background:var(--glass-bg); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); border:1px solid var(--glass-border); border-radius:var(--radius); padding:3.5rem 3rem; box-shadow:0 8px 32px 0 rgba(31, 38, 135, 0.07); } .mission-card h3{ font-weight:700; color:var(--text-primary); margin-bottom:1rem; } .mission-card p{ color:var(--text-secondary); line-height:1.8; font-size:0.95rem; } .value-card{ text-align:center; padding:2.5rem 1.5rem; background:var(--glass-bg); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); border:1px solid var(--glass-border); border-radius:24px; transition:all 0.45s cubic-bezier(0.16, 1, 0.3, 1); height:100%; position:relative; overflow:hidden; } .about-values-grid .value-card{ text-align:left; padding:2rem 1.55rem; box-shadow:0 18px 34px rgba(15, 23, 42, 0.08); } [data-theme="dark"] .about-values-grid .value-card{ box-shadow:0 18px 34px rgba(0, 0, 0, 0.26); } .value-card::after{ content:''; position:absolute; top:0; left:10%; right:10%; height:3px; border-radius:0 0 100px 100px; background:linear-gradient(90deg, transparent, var(--primary), var(--accent), transparent); opacity:0.5; transition:opacity 0.4s ease, left 0.4s ease, right 0.4s ease; } .value-card::before{ content:''; position:absolute; inset:0; border-radius:inherit; padding:2px; background:linear-gradient(135deg, var(--primary), transparent 40%, transparent 60%, var(--accent)); -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:opacity 0.5s ease; pointer-events:none; } .value-card:hover::before{ opacity:0.7; } .value-card:hover::after{ opacity:1; left:5%; right:5%; } .value-card:hover{ transform:translateY(-6px) scale(1.01); box-shadow:0 24px 48px rgba(0, 0, 0, 0.1); } [data-theme="dark"] .value-card:hover{ box-shadow:0 24px 60px rgba(0, 0, 0, 0.35); } .value-card .value-icon{ width:60px; height:60px; border-radius:16px; display:inline-flex; align-items:center; justify-content:center; font-size:1.4rem; margin-bottom:1.25rem; color:#fff; background:linear-gradient(135deg, var(--primary), var(--accent)); box-shadow:0 8px 24px rgba(255, 77, 0, 0.25); transition:transform 0.3s ease, box-shadow 0.3s ease; } .about-values-grid .value-card .value-icon{ margin-bottom:0.85rem; } .value-card:hover .value-icon{ transform:translateY(-2px) scale(1.05); box-shadow:0 12px 32px rgba(255, 77, 0, 0.3); } .value-card h3{ font-family:'Plus Jakarta Sans', var(--font-family); font-weight:700; font-size:1.15rem; color:var(--text-primary); margin-bottom:0.5rem; } .about-values-grid .value-card h3{ font-size:1.18rem; margin-bottom:0.6rem; } .value-card h5{ font-weight:700; color:var(--text-primary); margin-bottom:0.5rem; } .value-card p{ font-size:0.9rem; color:var(--text-secondary); line-height:1.65; } .about-values-grid .value-card p{ font-size:0.96rem; line-height:1.72; color:rgba(52, 64, 84, 0.82); } [data-theme="dark"] .about-values-grid .value-card p{ color:rgba(226, 232, 240, 0.82); } .feature-card{ background:var(--glass-bg); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); border:1px solid var(--glass-border); border-radius:24px; padding:2.5rem 2rem; text-align:center; transition:all 0.45s cubic-bezier(0.16, 1, 0.3, 1); height:100%; position:relative; overflow:hidden; } .feature-card::after{ content:''; position:absolute; top:0; left:10%; right:10%; height:3px; border-radius:0 0 100px 100px; background:linear-gradient(90deg, transparent, var(--primary), var(--accent), transparent); opacity:0.5; transition:opacity 0.4s ease, left 0.4s ease, right 0.4s ease; } .feature-card::before{ content:''; position:absolute; inset:0; border-radius:inherit; padding:2px; background:linear-gradient(135deg, var(--primary), transparent 40%, transparent 60%, var(--accent)); -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:opacity 0.5s ease; pointer-events:none; } .feature-card:hover::before{ opacity:0.7; } .feature-card:hover::after{ opacity:1; left:5%; right:5%; } .feature-card:hover{ transform:translateY(-6px) scale(1.01); box-shadow:0 24px 48px rgba(0, 0, 0, 0.1); border-color:rgba(255, 77, 0, 0.15); } [data-theme="dark"] .feature-card:hover{ box-shadow:0 24px 60px rgba(0, 0, 0, 0.35); } .feature-icon{ width:56px; height:56px; border-radius:16px; display:inline-flex; align-items:center; justify-content:center; font-size:1.5rem; color:#fff; margin-bottom:1.5rem; box-shadow:0 8px 24px rgba(0, 0, 0, 0.15); transition:transform 0.3s ease, box-shadow 0.3s ease; } .feature-card:hover .feature-icon{ transform:translateY(-2px) scale(1.05); box-shadow:0 12px 32px rgba(0, 0, 0, 0.2); } .feature-icon-purple{ background:linear-gradient(135deg, #D35400, #E67E22); } .feature-icon-cyan{ background:linear-gradient(135deg, #C0392B, #E74C3C); } .feature-icon-green{ background:linear-gradient(135deg, #00D68F, #55EFC4); } .feature-icon-orange{ background:linear-gradient(135deg, #FFAA00, #FDCB6E); } .feature-card h3{ font-family:'Plus Jakarta Sans', var(--font-family); font-weight:700; font-size:1.15rem; color:var(--text-primary); margin-bottom:0.75rem; } .feature-card h4{ font-weight:700; font-size:1.15rem; color:var(--text-primary); margin-bottom:0.75rem; } .feature-card p{ font-size:0.92rem; color:var(--text-secondary); line-height:1.65; } @media (max-width:991px){ .pub-navbar .navbar-collapse{ background:var(--bg-card-solid); border:1px solid var(--border-color); border-radius:var(--radius); padding:1rem; margin-top:0.75rem; box-shadow:var(--shadow-md); } .bento-grid{ grid-template-columns:1fr 1fr; } .bento-card-lg{ grid-column:span 2; } .steps-timeline{ grid-template-columns:1fr; gap:1.25rem; } .step-connector{ display:none; } .hero-metrics{ gap:1.5rem; } .metric-value{ font-size:1.6rem; } } @media (max-width:576px){ .hero-tracker{ flex-direction:column; border-radius:20px; gap:0.5rem; padding:0.75rem; } .tracker-btn{ border-radius:50px; width:100%; } .hero-metrics{ flex-direction:column; gap:1rem; } .metric-divider{ width:60px; height:1px; } .bento-grid{ grid-template-columns:1fr; } .bento-card-lg{ grid-column:span 1; } .hero-headline{ font-size:clamp(2rem, 8vw, 3rem); } } @keyframes float{ 0%, 100%{ transform:translate(0, 0); } 50%{ transform:translate(20px, -20px); } } @keyframes slideUp{ from{ opacity:0; transform:translateY(30px); } to{ opacity:1; transform:translateY(0); } } .logo-light{ display:inline-block; } .logo-dark{ display:none; } body.dark-mode .logo-light, [data-theme="dark"] .logo-light{ display:none !important; } body.dark-mode .logo-dark, [data-theme="dark"] .logo-dark{ display:inline-block !important; } .reach-section{ position:relative; padding:120px 0; overflow:visible; background:var(--bg-surface); border-top:1px solid var(--border-color); border-bottom:1px solid var(--border-color); } .reach-text-col{ padding-right:40px; } .reach-section .section-badge{ color:#FF4D00; background:rgba(255, 77, 0, 0.1); margin-bottom:20px; } .reach-section .section-title{ color:var(--text-primary); font-size:clamp(2rem, 5vw, 3rem); line-height:1.1; margin-bottom:1.5rem; } .reach-section .section-desc{ color:var(--text-secondary); font-size:1.15rem; line-height:1.6; margin-bottom:2.5rem; } .reach-features{ list-style:none; padding:0; margin:0; } .reach-features li{ color:var(--text-primary); font-size:1.1rem; margin-bottom:18px; display:flex; align-items:center; gap:12px; font-weight:500; } .reach-features i.text-orange{ color:#FF4D00 !important; background:rgba(255, 77, 0, 0.15); padding:6px; border-radius:50%; font-size:1.1rem; } .globe-wrapper{ width:100%; min-height:480px; display:flex; justify-content:center; align-items:center; overflow:visible; } .globe-outer{ position:relative; width:min(100%, 720px); height:480px; overflow:visible; transform-style:preserve-3d; } .globe-atmosphere{ position:absolute; inset:-28px; border-radius:50%; background:radial-gradient(circle, rgba(255, 77, 0, 0.18) 0%, rgba(255, 193, 7, 0.06) 40%, transparent 68%); z-index:0; pointer-events:none; animation:globe-pulse 4s ease-in-out infinite; } [data-theme="dark"] .globe-atmosphere{ background:radial-gradient(circle, rgba(255, 77, 0, 0.2) 0%, rgba(255, 140, 0, 0.06) 40%, transparent 68%); } .globe-gl-container{ position:relative; z-index:1; width:100%; height:100%; cursor:grab; overflow:visible; } .globe-gl-container:active{ cursor:grabbing; } .reach-overlay-stats{ position:absolute; bottom:10%; left:50%; transform:translateX(-50%); z-index:5; pointer-events:none; } .glass-stat{ display:inline-flex; align-items:center; gap:15px; background:rgba(15, 23, 42, 0.7); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border:1px solid rgba(255, 255, 255, 0.1); padding:15px 30px; border-radius:50px; box-shadow:0 20px 40px rgba(0, 0, 0, 0.4); color:var(--text-light); } .glass-stat strong{ display:block; font-size:1.1rem; color:#fff; letter-spacing:1px; } .glass-stat p{ margin:0; font-size:0.8rem; color:var(--brand-orange); text-transform:uppercase; letter-spacing:2px; } .pulse-dot{ width:12px; height:12px; background-color:#22c55e; border-radius:50%; position:relative; } .pulse-dot::after{ content:''; position:absolute; inset:-5px; border:2px solid #22c55e; border-radius:50%; animation:ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite; } @keyframes orbPulse{ 0%{ transform:scale(0.9); opacity:0.6; } 100%{ transform:scale(1.1); opacity:1; } } @keyframes ping{ 75%, 100%{ transform:scale(2); opacity:0; } } @keyframes globe-pulse{ 0%, 100%{ transform:scale(1); opacity:0.45; } 50%{ transform:scale(1.06); opacity:0.85; } } .pub-section, .pub-section-alt, .trust-marquee-section, .bento-section, .reach-section, .pipe-section, .stats-section, .platform-section, .faq-section, .cta-section, .cta-section-v2, .page-hero{ content-visibility:auto; } @media (max-width:991.98px){ .hero-section{ min-height:auto; padding-top:7rem; padding-bottom:4.5rem; } .pub-section, .pub-section-alt, .reach-section, .stats-section, .cta-section, .cta-section-v2, .page-hero{ padding-block:clamp(4.5rem, 9vw, 5.5rem); } .reach-text-col{ padding-right:0; margin-bottom:2rem; } .globe-wrapper{ min-height:400px; } .globe-outer{ height:400px; } .glass-stat{ padding:0.9rem 1.2rem; gap:0.75rem; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); } .pub-footer{ padding-top:3rem; } } @media (max-width:767.98px){ .trust-marquee-section{ display:none !important; } .pub-navbar .container{ padding-inline:1rem; } .pub-navbar .navbar-brand img{ height:64px !important; margin-bottom:-16px !important; } .pub-navbar .navbar-collapse{ padding:0.85rem; } .hero-headline{ font-size:clamp(2.2rem, 10vw, 3.5rem); } .hero-description{ font-size:1rem; margin-bottom:2.25rem; } .hero-tracker-wrap{ margin-bottom:2rem; } .globe-wrapper{ min-height:320px; } .globe-outer{ height:320px; } .hero-tracker, .bento-glass-card, .platform-card, .faq-item, .cta-card, .glass-stat{ backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); } .hero-tracker{ padding-left:1rem; box-shadow:0 14px 30px rgba(0, 0, 0, 0.08); } .hero-tracker input{ min-width:0; font-size:1rem; } .hero-tracker .tracker-btn{ padding:0.95rem 1.5rem; } .hero-ambient-stats{ flex-wrap:wrap; gap:0.75rem; } .section-header{ margin-bottom:2.5rem; } .section-title{ font-size:clamp(1.8rem, 7vw, 2.5rem); } .section-desc{ font-size:0.98rem; } .bento-grid-v2, .stats-grid{ gap:1rem; } .marquee-content{ animation-duration:30s; } .footer-newsletter{ border-radius:22px; } .footer-bottom p{ flex-wrap:wrap; } } @media (max-width:575.98px){ .pub-section, .pub-section-alt, .reach-section, .stats-section, .page-hero, .cta-section, .cta-section-v2{ padding-block:4rem; } .hero-tracker{ flex-direction:column; align-items:stretch; border-radius:24px; gap:0.6rem; padding:0.85rem; } .tracker-icon{ margin:0 auto 0.15rem; } .hero-tracker input{ text-align:center; } .hero-tracker .tracker-btn, .tracker-btn{ width:100%; } .hero-ambient-stats{ flex-direction:column; align-items:stretch; } .reach-overlay-stats{ position:static; transform:none; margin-top:1.25rem; } .glass-stat{ width:100%; justify-content:center; border-radius:22px; } .footer-social{ flex-wrap:wrap; } .footer-newsletter{ flex-direction:column; border-radius:18px; } .footer-newsletter input, .footer-newsletter button{ width:100%; } .footer-newsletter button{ padding-block:0.85rem; } } @media (hover:none) and (pointer:coarse){ .hero-tracker .tracker-btn:hover, .bento-glass-card:hover, .bento-hover-glow:hover, .platform-card:hover, .faq-item:hover, .footer-social a:hover{ transform:none; box-shadow:none; } .service-card:hover, .value-card:hover, .feature-card:hover, .contact-card:hover, .stat-counter-card:hover, .btn-receipt:hover{ transform:none; } .service-card:hover::before, .value-card:hover::before, .feature-card:hover::before{ opacity:0; } .service-card:hover::after, .value-card:hover::after, .feature-card:hover::after, .contact-card:hover::after, .stat-counter-card:hover::after{ opacity:0.5; left:10%; right:10%; } .service-card:hover .service-icon, .value-card:hover .value-icon, .feature-card:hover .feature-icon, .contact-info-item:hover .contact-info-icon, .story-visual:hover img{ transform:none; box-shadow:0 8px 24px rgba(0, 0, 0, 0.15); } .bento-hover-glow:hover::before, .bento-glass-card:hover .bento-hover-glow::before{ opacity:0; } .bento-glass-card:hover .bento-card-accent{ opacity:0.7; left:10%; right:10%; } .bento-glass-card:hover .bento-orb{ opacity:0.12; transform:none; } .bento-glass-card:hover .bento-icon{ transform:none; box-shadow:0 8px 24px rgba(0, 0, 0, 0.15); } .marquee-content:hover{ animation-play-state:running; } } @media (prefers-reduced-motion:reduce){ .reveal, .reveal-hero{ opacity:1 !important; visibility:visible !important; transform:none !important; filter:blur(0) !important; transition:none !important; } .hero-aura, .hero-grid-overlay, .hero-tracker-wrap::before, .pulse-dot::after{ animation:none !important; } .hero-lite{ animation-duration:0.45s !important; animation-timing-function:ease-out !important; } .marquee-content{ animation-duration:60s !important; } .hero-tracker, .bento-glass-card, .platform-card, .faq-item, .cta-card, .footer-social a{ transition:none !important; } } .scroll-to-top{ position:fixed; bottom:30px; right:30px; width:50px; height:50px; border-radius:50%; background:linear-gradient(135deg, var(--primary), var(--accent)); color:#fff; border:none; display:flex; align-items:center; justify-content:center; font-size:1.25rem; cursor:pointer; z-index:999; opacity:0; visibility:hidden; transform:translateY(20px); transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow:0 4px 15px rgba(255, 77, 0, 0.3); } .scroll-to-top.show{ opacity:1; visibility:visible; transform:translateY(0); } .scroll-to-top:hover{ transform:translateY(-5px); box-shadow:0 8px 25px rgba(255, 77, 0, 0.4); background:linear-gradient(135deg, var(--accent), var(--primary)); color:#fff; } .track-page-section{ padding:6rem 0; overflow:hidden; } .track-summary-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:1.5rem; margin-bottom:2rem; } .track-summary-card{ background:var(--glass-bg); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); border:1px solid var(--glass-border); border-radius:20px; padding:1.5rem; transition:transform 0.3s ease, box-shadow 0.3s ease; box-shadow:0 8px 32px rgba(0,0,0,0.03); } .track-summary-card:hover{ transform:translateY(-4px); box-shadow:0 12px 40px rgba(0,0,0,0.06); } .track-summary-icon{ width:48px; height:48px; border-radius:12px; background:rgba(255, 77, 0, 0.1); color:var(--primary); display:flex; align-items:center; justify-content:center; font-size:1.5rem; margin-bottom:1.2rem; } .track-summary-icon-blue{ background:rgba(13, 110, 253, 0.1); color:#0d6efd; } .track-summary-icon-green{ background:rgba(25, 135, 84, 0.1); color:#198754; } .track-summary-label{ font-size:0.85rem; color:var(--text-secondary); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:0.4rem; display:block; } .track-summary-value{ font-size:1.25rem; font-weight:700; color:var(--text-primary); margin-bottom:0.4rem; } .track-summary-support{ font-size:0.8rem; color:var(--text-muted); } .timeline-bento-card{ background:var(--glass-bg); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); border:1px solid var(--glass-border); border-radius:24px; padding:2.5rem; box-shadow:0 8px 32px rgba(0,0,0,0.03); } .timeline-bento-card-dark{ background:var(--surface-alt); border:1px solid rgba(255, 255, 255, 0.05); } .parcel-overview{ display:flex; justify-content:space-between; align-items:center; border-bottom:1px dashed var(--border-color); padding-bottom:1.5rem; flex-wrap:wrap; gap:1rem; margin-bottom:1.5rem; } .tracking-badge{ display:inline-flex; align-items:center; background:rgba(255, 77, 0, 0.1); color:var(--primary); padding:0.6rem 1.2rem; border-radius:50px; font-weight:700; font-family:var(--font-mono, monospace); font-size:1.1rem; border:1px solid rgba(255, 77, 0, 0.2); } .btn-receipt{ display:inline-flex; align-items:center; gap:0.5rem; color:var(--text-primary); background:var(--bg-body); border:1px solid var(--border-color); padding:0.6rem 1.2rem; border-radius:12px; font-size:0.95rem; font-weight:600; text-decoration:none; transition:all 0.2s ease; } .btn-receipt:hover{ background:var(--primary); color:#fff; border-color:var(--primary); transform:translateY(-2px); box-shadow:0 4px 15px rgba(255, 77, 0, 0.2); } .track-details-heading{ font-size:1.4rem; font-weight:700; color:var(--text-primary); margin-bottom:1.5rem; display:flex; align-items:center; } .track-status-banner{ display:flex; justify-content:space-between; align-items:flex-start; background:var(--bg-body); border:1px solid var(--border-color); border-radius:16px; padding:1.5rem; margin-bottom:1.5rem; box-shadow:0 4px 20px rgba(0,0,0,0.02); } .track-status-banner h3{ font-size:1.3rem; font-weight:700; margin:0.3rem 0; color:var(--text-primary); } .track-status-banner p{ font-size:0.85rem; color:var(--text-muted); margin:0; max-width:250px; } .track-details-route{ background:var(--bg-body); border-radius:16px; padding:1.8rem 1.5rem; border:1px solid var(--border-color); margin-bottom:1.5rem; } .track-details-separator{ color:var(--text-muted); font-size:1.2rem; opacity:0.5; display:flex; align-items:center; } .track-address-info{ font-size:0.9rem; color:var(--text-secondary); line-height:1.5; background:var(--glass-bg); padding:1rem; border-radius:12px; margin-top:1.5rem !important; } .track-route-meta{ display:flex; justify-content:center; gap:0.8rem; flex-wrap:wrap; margin-top:1.5rem; padding-top:1.5rem; border-top:1px dashed var(--border-color); } .track-detail-pill{ display:inline-flex; align-items:center; gap:0.4rem; font-size:0.8rem; font-weight:600; color:var(--text-secondary); background:var(--glass-bg); padding:0.4rem 0.8rem; border-radius:50px; border:1px solid var(--border-color); } .track-details-hr{ border-color:var(--border-color); margin:1.5rem 0; opacity:0.5; } .track-details-label, .track-details-label-sm{ font-size:0.8rem; color:var(--text-secondary); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:0.3rem; } .track-details-value{ font-size:0.95rem; font-weight:600; color:var(--text-primary); } .track-details-value-lg{ font-size:1.1rem; font-weight:700; color:var(--text-primary); } .track-details-value-success{ font-size:1.1rem; font-weight:700; color:var(--success, #198754); } .track-details-unit{ font-size:0.8rem; color:var(--text-muted); font-weight:normal; } .timeline{ list-style:none; padding:0; margin:0; position:relative; } .timeline::before{ content:''; position:absolute; top:0; bottom:0; left:24px; width:2px; background:var(--border-color); } .timeline-item{ position:relative; padding-left:60px; padding-bottom:2.5rem; } .timeline-item:last-child{ padding-bottom:0; } .timeline-item:last-child::before{ display:none; } .timeline-marker{ position:absolute; left:17px; top:3px; width:16px; height:16px; border-radius:50%; background:var(--bg-body); border:3px solid var(--border-color); z-index:1; transition:all 0.3s ease; } .timeline-item.completed .timeline-marker{ background:var(--success, #198754); border-color:rgba(25, 135, 84, 0.3); box-shadow:0 0 0 4px rgba(25, 135, 84, 0.1); } .timeline-item.current .timeline-marker{ background:var(--primary); border-color:rgba(255, 77, 0, 0.3); box-shadow:0 0 0 6px rgba(255, 77, 0, 0.15); animation:pulseMarker 2s infinite; } .timeline-item.returned .timeline-marker{ background:var(--danger, #dc3545); border-color:rgba(220, 53, 69, 0.3); box-shadow:0 0 0 4px rgba(220, 53, 69, 0.1); } .timeline-content{ background:var(--bg-body); padding:1.2rem 1.5rem; border-radius:16px; border:1px solid var(--border-color); box-shadow:0 2px 10px rgba(0,0,0,0.02); position:relative; } .timeline-content::before{ content:''; position:absolute; left:-8px; top:16px; width:16px; height:16px; background:var(--bg-body); border-left:1px solid var(--border-color); border-bottom:1px solid var(--border-color); transform:rotate(45deg); } .timeline-title{ font-size:1.1rem; font-weight:700; color:var(--text-primary); margin-bottom:0.4rem; } .timeline-desc{ font-size:0.9rem; color:var(--text-secondary); margin-bottom:0.8rem; line-height:1.5; } .timeline-time{ display:inline-block; font-size:0.8rem; color:var(--text-muted); background:var(--glass-bg); padding:0.3rem 0.8rem; border-radius:6px; border:1px solid var(--glass-border); } @keyframes pulseMarker{ 0%{box-shadow:0 0 0 0 rgba(255, 77, 0, 0.4);} 70%{box-shadow:0 0 0 10px rgba(255, 77, 0, 0);} 100%{box-shadow:0 0 0 0 rgba(255, 77, 0, 0);} } @media (max-width:991.98px){ .track-summary-grid{ grid-template-columns:1fr; } .parcel-overview{ flex-direction:column; align-items:flex-start; } .track-status-banner{ flex-direction:column; } } .bg-parallax-section{ position:relative; background-attachment:fixed; background-position:center; background-repeat:no-repeat; background-size:cover; padding:10rem 0; overflow:hidden; } .bg-parallax-fleet{ background-image:url('../img/fleet_bg.webp'); } .bg-parallax-warehouse{ background-image:url('../img/service.webp'); } .bg-parallax-overlay{ position:absolute; inset:0; background:rgba(10, 10, 14, 0.55); z-index:1; } .bg-parallax-content{ position:relative; z-index:2; } .parallax-title{ color:#fff; } .parallax-desc{ color:rgba(255, 255, 255, 0.8); } .glass-feature-card{ background:rgba(255, 255, 255, 0.05); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border:1px solid rgba(255, 255, 255, 0.1); border-radius:20px; padding:2.5rem; color:#fff; transition:transform 0.3s ease, box-shadow 0.3s ease; height:100%; } .glass-feature-card:hover{ transform:translateY(-5px); box-shadow:0 15px 35px rgba(255, 77, 0, 0.15); border-color:rgba(255, 77, 0, 0.3); } [data-theme="light"] .glass-feature-card{ background:rgba(255, 255, 255, 0.6); border:1px solid rgba(0, 0, 0, 0.05); color:var(--text-primary); } [data-theme="light"] .glass-feature-card h3{ color:var(--text-primary); } [data-theme="light"] .glass-feature-card p{ color:var(--text-secondary); } .glass-feature-icon{ width:60px; height:60px; background:linear-gradient(135deg, var(--primary), var(--accent)); border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:1.8rem; color:#fff; margin-bottom:1.5rem; box-shadow:0 8px 20px rgba(255, 77, 0, 0.3); } [data-theme="light"] .bg-parallax-overlay{background:rgba(255, 255, 255, 0.65);} [data-theme="light"] .parallax-title{color:var(--text-primary);} [data-theme="light"] .parallax-desc{color:var(--text-secondary);}