:root{ --c-bg:#0B1A2A;--c-bg-2:#11263C;--c-bg-card:#162F4A;--c-bg-light:#F5F7FA;--c-white:#ffffff;--c-text:#A8B3C7;--c-text-dim:#6B7280;--c-heading:#FFFFFF;--c-text-dark:#374151;--c-heading-dark:#111827;--c-accent:#FF6A00;--c-accent-h:#FF8533;--c-border:#1E3A5F;--c-border-l:#E5E7EB;--c-cyan:#00E5FF;--f-sans:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;--s-section:80px;--s-container:1280px;--s-container-padding:40px;--s-gap:24px;--r-sm:8px;--r-md:8px;--r-lg:8px;--fs-h1:48px;--fs-h2:36px;--fs-h3:24px;--fs-body:16px;--fs-small:14px;--btn-height:44px;--btn-radius:8px} *,*::before,*::after{ box-sizing:border-box;margin:0;padding:0} html{ scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ font-family:var(--f-sans);background:var(--c-bg);color:var(--c-text);line-height:1.6;font-size:15px;-webkit-font-smoothing:antialiased} img{ max-width:100%;height:auto;display:block} a{ color:inherit;text-decoration:none} ul,ol{ list-style:none} button,input,textarea,select{ font:inherit;color:inherit} button{ cursor:pointer;border:none;background:none} h1,h2,h3,h4{ color:var(--c-heading);line-height:1.2;font-weight:700} h1{ font-size:var(--fs-h1)} h2{ font-size:var(--fs-h2)} h3{ font-size:var(--fs-h3)} h4{ font-size:20px} p{ color:var(--c-text);font-size:var(--fs-body)} .container{ width:100%;max-width:var(--s-container);margin:0 auto;padding:0 var(--s-container-padding)} .section{ padding:var(--s-section) 0;border-top:1px solid rgba(255,255,255,0.06)} .section-header{ margin-bottom:48px} .section-light{ background:var(--c-bg-light);color:var(--c-text-dark);border-top:1px solid rgba(0,0,0,0.06)} .section-light h1,.section-light h2,.section-light h3,.section-light .section-header h2{ color:var(--c-heading-dark)} .section-light p,.section-light .section-header p{ color:var(--c-text-dark)} .section-light .section-header h2::after{ background:linear-gradient(90deg,var(--c-accent),#3b82f6)} .section-dark{ background:var(--c-bg-card)} .section-dark h2,.section-dark .section-header h2{ color:var(--c-heading)} .section-dark p,.section-dark .section-header p{ color:var(--c-text-dim)} .section-header{ text-align:center;margin-bottom:56px;position:relative} .section-header h2{ margin-bottom:12px;position:relative;display:inline-block} .section-header h2::after{ content:'';position:absolute;bottom:-10px;left:50%;transform:translateX(-50%);width:0;height:3px;background:linear-gradient(90deg,var(--c-accent),#00e5ff);border-radius:2px;transition:width .6s ease .2s} .section-header.in-view h2::after{ width:60px} .section-header p{ color:var(--c-text-dim);max-width:600px;margin:0 auto;font-size:16px} .site-header{ position:fixed;top:0;left:0;width:100%;z-index:1000;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:none;box-shadow:none;transition:background 0.3s,box-shadow 0.3s,backdrop-filter 0.3s,border-bottom 0.3s} .site-header.scrolled{ background:rgba(10,20,35,0.95);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 2px 10px rgba(0,0,0,0.2);border-bottom:1px solid rgba(255,255,255,0.08)} .header-inner{ display:flex;align-items:center;justify-content:space-between;height:72px} .site-header:not(.scrolled) .logo-img{ filter:brightness(0) invert(1)} .site-header:not(.scrolled) .nav-link{ color:rgba(255,255,255,0.92)} .site-header:not(.scrolled) .nav-link:hover,.site-header:not(.scrolled) .nav-link.active{ color:#fff;background:rgba(255,255,255,0.10)} .site-header:not(.scrolled) .hamburger span{ background:#fff} .site-header:not(.scrolled) .btn-quote{ border-color:rgba(255,255,255,0.5);color:#fff} .logo{ display:flex;align-items:center;gap:10px;flex-shrink:0} .logo-img{ height:40px;width:auto;display:block} .footer-brand .logo-img{ height:36px} .nav-desktop{ display:flex;align-items:center;gap:4px} .nav-link{ padding:8px 14px;font-size:14px;font-weight:500;color:var(--c-text);border-radius:var(--r-sm);transition:color 0.2s,background 0.2s} .nav-link:hover,.nav-link.active{ color:var(--c-white);background:rgba(255,255,255,0.06)} .header-right{ display:flex;align-items:center;gap:12px;flex-shrink:0} .btn-primary,.btn-quote{ display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--btn-height);padding:0 28px;font-size:var(--fs-small);font-weight:600;background:var(--c-accent);color:#fff;border-radius:var(--btn-radius);transition:background .35s ease,transform .3s ease,box-shadow .4s ease;box-shadow:0 0 20px rgba(255,106,0,0.3);border:none} .btn-primary:hover,.btn-quote:hover{ background:linear-gradient(90deg,#FF6A00,#FF8533);transform:translateY(-2px);box-shadow:0 0 20px rgba(255,106,0,0.4)} .btn-outline{ display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--btn-height);padding:0 24px;font-size:var(--fs-small);font-weight:500;border:1.5px solid var(--c-border);color:var(--c-white);background:transparent;border-radius:var(--btn-radius);transition:border-color 0.2s,color 0.2s,box-shadow 0.3s} .btn-outline:hover{ border-color:var(--c-accent);color:var(--c-accent);box-shadow:0 0 12px rgba(255,106,0,0.2)} .btn-sm{ height:36px;padding:0 18px;font-size:13px} .hero-home{ position:relative;height:100vh;width:100%;overflow:hidden} .hero-video{ position:absolute;top:50%;left:50%;width:100%;height:100%;transform:translate(-50%,-50%);object-fit:cover;object-position:center 70%;z-index:1} .hero-overlay{ position:absolute;inset:0;background:rgba(5,15,30,0.55);z-index:2} .hero-home .hero-content{ position:absolute;top:55%;left:50%;transform:translate(-50%,-50%);width:100%;max-width:1200px;padding:0 24px;text-align:center;z-index:3} .hero-inner{ position:relative;height:360px;width:100%;display:flex;align-items:center;justify-content:center;overflow:hidden} @media (max-width:768px){ .hero-inner{ height:300px} } } .hero-home .hero-content h1,margin-bottom:20px;color:#fff} .hero-subtitle{ font-size:17px;color:rgba(255,255,255,0.85);line-height:1.7;margin-bottom:36px;font-weight:400} .hero-btns{ display:flex;gap:16px;flex-wrap:wrap;justify-content:center} .card-dark{ background:var(--c-bg-card);border:1px solid var(--c-border);border-radius:var(--r-md);overflow:hidden;transition:border-color 0.3s,transform 0.3s,box-shadow 0.3s;display:flex;flex-direction:column;height:380px;max-width:100%} .card-dark:hover{ border-color:var(--c-accent);transform:translateY(-6px);box-shadow:0 8px 30px rgba(0,0,0,0.3),0 0 25px rgba(0,229,255,0.15)} .card-img{ width:100%;height:200px;aspect-ratio:4 / 3;overflow:hidden;background:var(--c-bg-light);flex-shrink:0} .card-img img{ width:100%;height:100%;object-fit:cover;transition:transform .4s ease,filter .4s ease} .card-dark:hover .card-img img{ transform:scale(1.05);filter:brightness(1.1)} .card-body{ padding:20px;display:flex;flex-direction:column;flex:1;overflow:hidden} .card-title{ font-size:var(--fs-small);font-weight:600;color:var(--c-heading);margin-bottom:8px;line-height:1.4;min-height:40px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .card-desc{ font-size:13px;color:var(--c-text-dim);line-height:1.55;flex:1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:16px} .card-tag{ display:inline-block;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;color:var(--c-accent);margin-bottom:8px} .card-body .btn-sm,.card-body .btn-outline{ margin-top:auto;align-self:flex-start} .global-map{ width:100%;min-height:480px;height:auto;aspect-ratio:auto;border-radius:12px;overflow:hidden;position:relative;background:#071320;transition:transform 0.4s ease,box-shadow 0.4s ease} .global-map:hover{ transform:scale(1.01);box-shadow:0 8px 32px rgba(0,207,255,0.12),0 0 60px rgba(255,106,0,0.06)} .map-overlay-data{ position:absolute;bottom:10px;left:0;width:100%;display:flex;justify-content:center;gap:30px;color:#00cfff;font-size:14px;font-family:'Inter',-apple-system,sans-serif;pointer-events:none} .about-visual{ width:100%;height:320px;border-radius:12px;overflow:hidden;position:relative;background:#0b1a2a;transition:transform 0.4s ease,box-shadow 0.4s ease} .about-visual:hover{ transform:scale(1.02);box-shadow:0 8px 32px rgba(0,207,255,0.15),0 0 60px rgba(255,106,0,0.08)} @keyframes abDash{ to{ stroke-dashoffset:-20} } .card-img{ width:100%;height:200px;aspect-ratio:16 / 9;overflow:hidden;background:var(--c-bg-light);flex-shrink:0} .card-img img{ width:100%;height:100%;object-fit:cover;transition:transform .4s ease,filter .4s ease} .card-dark:hover .card-img img{ transform:scale(1.05);filter:brightness(1.1)} .blog-grid,.cards-grid-3,.apps-row-1,.apps-row-2{ display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-gap)} .cards-grid-4{ display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-gap)} .product-card{ height:380px} .product-card .product-card-img{ width:100%;height:200px;aspect-ratio:4 / 3;overflow:hidden;background:var(--c-bg-light);flex-shrink:0} .product-card .product-card-img img{ width:100%;height:100%;object-fit:cover;transition:transform 0.4s} .product-card:hover .product-card-img img{ transform:scale(1.05)} .blog-card{ height:380px} .blog-grid .card-dark{ height:380px} .blog-grid .card-dark:hover,.blog-card.card-dark:hover{ transform:translateY(-6px);box-shadow:0 0 20px rgba(0,229,255,0.15)} width:100%;height:100%;object-fit:cover;transition:transform 0.4s} .product-card:hover .card-img img,.product-card:hover .product-card-img img{ transform:scale(1.05)} .card-featured{ border-color:rgba(0,229,255,0.3) !important} .card-featured .card-title::before{ content:"★ ";color:var(--c-cyan);font-size:12px} .about-grid{ display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center} .about-text h2{ margin-bottom:16px} .about-text p{ line-height:1.8;margin-bottom:24px} .about-features{ display:flex;flex-direction:column;gap:10px;margin-bottom:28px} .about-feature-item{ display:flex;align-items:center;gap:10px;font-size:14px;color:var(--c-text)} .check-icon{ color:var(--c-accent);font-size:16px;flex-shrink:0} .about-img{ overflow:hidden;border-radius:var(--r-lg)} .about-img img{ width:100%;height:380px;object-fit:cover;object-position:center 30%} .global-map-home{ min-height:420px;height:auto;background:#071320} .about-grid > .about-text{ order:2} .about-grid > .about-img{ order:1} .quality-grid{ display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start} .quality-img img{ width:100%;height:400px;object-fit:cover;border-radius:var(--r-md)} .quality-text h2{ margin-bottom:14px} .quality-text p{ color:var(--c-text-dim);line-height:1.8;margin-bottom:28px} .quality-checklist{ display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:32px} .quality-check-item{ display:flex;align-items:center;gap:8px;background:var(--c-bg-light);border:1px solid var(--c-border);border-radius:var(--r-sm);padding:12px 14px;font-size:14px;color:var(--c-text)} .cta-block{ position:relative;background:linear-gradient(135deg,var(--c-bg) 0%,#1c0a00 100%);border-top:1px solid var(--c-border);border-bottom:1px solid var(--c-border);text-align:center;padding:var(--s-section) 0;overflow:hidden} .cta-block::before{ content:'';position:absolute;inset:0;background:url('/images/cta-bg.jpg') center/cover no-repeat;opacity:0.12;z-index:0;pointer-events:none} .cta-block .container{ position:relative;z-index:1} .cta-block h2{ margin-bottom:16px;color:#fff} .cta-block p{ max-width:600px;margin:0 auto 32px;color:var(--c-text-dim);font-size:16px} .cta-buttons{ display:flex;gap:16px;justify-content:center;flex-wrap:wrap} .cta-buttons .btn-primary{ background:var(--c-accent);box-shadow:0 0 24px rgba(255,106,0,0.4)} .cta-chip-anim{ position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden} .cta-chip-anim iframe{ width:100%;height:100%;border:none;display:block} .distribution-brands{ background:var(--c-bg);padding:60px 0 30px;overflow:hidden;position:relative;border-top:1px solid var(--c-border)} .distribution-brands .section-header h2{ color:#fff} .distribution-brands .section-header p{ color:rgba(255,255,255,0.55)} .logo-slider{ position:relative;overflow:hidden;padding:20px 0;-webkit-mask-image:linear-gradient(to right,transparent 0%,#000 8%,#000 92%,transparent 100%);mask-image:linear-gradient(to right,transparent 0%,#000 8%,#000 92%,transparent 100%)} .logo-track{ display:flex;align-items:center;gap:50px;width:max-content;animation:logoScroll 30s linear infinite;will-change:transform} .logo-track:hover{ animation-play-state:paused} @keyframes logoScroll{ from{ transform:translateX(0)} to{ transform:translateX(-50%)} } .brand-logo{ height:50px;width:auto;max-width:140px;object-fit:contain;filter:grayscale(100%) opacity(0.6);transition:filter 0.3s,box-shadow 0.3s,transform 0.2s;flex-shrink:0} .brand-logo:hover{ filter:grayscale(0%) opacity(1);box-shadow:0 0 18px rgba(255,106,0,0.45);border-radius:4px;transform:scale(1.05)} .compliance-note{ text-align:center;font-size:12px;color:rgba(255,255,255,0.35);margin-top:18px;letter-spacing:0.3px} .site-footer{ background:var(--c-bg);padding:60px 0} .section-light .card-dark{ background:#FFFFFF;border:1px solid #E5E7EB;color:var(--c-text-dark)} .section-light .card-dark:hover{ border-color:var(--c-accent);box-shadow:0 12px 36px rgba(0,0,0,0.10),0 0 20px rgba(255,106,0,0.08)} .section-light .card-title,.section-light .card-dark h3{ color:var(--c-heading-dark)} .section-light .card-desc,.section-light .card-dark p{ color:var(--c-text-dark)} .section-light .quality-check-item{ background:#FFFFFF;border:1px solid #E5E7EB;color:var(--c-text-dark)} .section-light .btn-outline{ color:var(--c-heading-dark);border-color:#D1D5DB} .section-light .btn-outline:hover{ border-color:var(--c-accent);color:var(--c-accent)} .section-light .btn-sm.btn-outline{ color:var(--c-accent);border-color:var(--c-accent)} .fade-in{ opacity:0;transform:translateY(24px);transition:opacity 0.6s ease,transform 0.6s ease} .fade-in.in-view{ opacity:1;transform:translateY(0)} .category-tab:hover{ border-color:var(--c-accent) !important;color:var(--c-accent) !important} .blog-article-row{ transition:opacity 0.3s ease} @media (max-width:768px){ .blog-article-row{ grid-template-columns:1fr !important} } .footer-grid{ display:grid;grid-template-columns:repeat(4,1fr);gap:36px} .footer-brand p{ color:var(--c-text-dim);font-size:14px;line-height:1.7;margin:16px 0 20px} .footer-social{ display:flex;gap:10px} .footer-social a{ width:36px;height:36px;border-radius:var(--r-sm);background:var(--c-bg-light);display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--c-text);transition:background 0.2s,color 0.2s,transform 0.2s} .footer-social a:hover{ background:var(--c-accent);color:#fff;transform:translateY(-2px)} .footer-title{ font-size:14px;font-weight:600;color:var(--c-white);margin-bottom:20px;text-transform:uppercase;letter-spacing:0.5px} .footer-links li{ margin-bottom:10px} .footer-links a{ font-size:14px;color:var(--c-text-dim);transition:color 0.2s} .footer-links a:hover{ color:var(--c-accent)} .footer-contact-item{ display:flex;gap:12px;margin-bottom:16px} .footer-contact-item .icon{ color:var(--c-accent);flex-shrink:0;margin-top:2px} .footer-contact-item .label{ font-size:12px;color:var(--c-text-dim);margin-bottom:2px} .footer-contact-item .value{ font-size:14px;color:var(--c-text)} .footer-bottom{ border-top:1px solid var(--c-border);padding-top:24px;display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--c-text-dim);margin-top:48px} .footer-bottom a{ color:var(--c-text-dim);transition:color 0.2s} .footer-bottom a:hover{ color:var(--c-accent)} .btn-quote{ display:inline-flex;align-items:center;gap:6px;padding:9px 20px;font-size:13px;font-weight:600;background:var(--c-accent);color:#fff;border-radius:var(--r-sm);transition:background 0.2s,box-shadow 0.3s} .hamburger{ display:none;flex-direction:column;gap:5px;padding:8px;cursor:pointer;background:none} .hamburger span{ width:22px;height:2px;background:var(--c-white);border-radius:2px;transition:transform 0.3s,opacity 0.3s} .mobile-nav{ display:none;position:fixed;top:72px;left:0;width:100%;background:rgba(11,12,15,0.98);backdrop-filter:blur(12px);padding:16px 24px 32px;z-index:999;flex-direction:column;gap:4px} .mobile-nav.open{ display:flex} .mobile-nav .nav-link{ padding:12px 14px;font-size:16px} .mobile-nav .btn-quote{ margin-top:12px;justify-content:center} @media (max-width:1024px){ .footer-grid{ grid-template-columns:1fr 1fr;gap:40px} :root{ --s-section:80px} .cards-grid-4{ grid-template-columns:repeat(2,1fr)} .about-grid{ gap:40px} .quality-grid{ gap:40px} .apps-row-1,.apps-row-2{ grid-template-columns:repeat(2,1fr)} .blog-grid,.cards-grid-3{ grid-template-columns:repeat(2,1fr)} } @media (max-width:768px){ .nav-desktop,.header-right .btn-quote{ display:none} .hamburger{ display:flex} .footer-grid{ grid-template-columns:1fr} .footer-bottom{ flex-direction:column;gap:12px;text-align:center} .hero-home{ min-height:auto} .hero-home .hero-content{ top:50%} .cta-buttons{ flex-direction:column;align-items:center} :root{ --s-section:64px} .about-grid{ grid-template-columns:1fr} .quality-grid{ grid-template-columns:1fr} .cards-grid-4{ grid-template-columns:repeat(2,1fr)} .apps-row-1,.apps-row-2{ grid-template-columns:repeat(2,1fr)} .blog-grid,.cards-grid-3{ grid-template-columns:1fr} .blog-grid .card-dark{ height:auto;min-height:360px} .about-img img{ height:260px} .quality-img img{ height:260px} .distribution-brands{ padding:40px 0 20px} .logo-slider{ -webkit-mask-image:none;mask-image:none;overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory} .logo-track{ gap:30px;animation:none;width:auto} .brand-logo{ height:40px;scroll-snap-align:center} } @media (max-width:480px){ .cards-grid-4{ grid-template-columns:1fr} .apps-row-1,.apps-row-2{ grid-template-columns:1fr} .blog-grid .card-dark{ height:auto;min-height:340px} } .video-section{ background:var(--c-bg-card)} .video-grid{ display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .video-card{ background:var(--c-bg);border-radius:14px;overflow:hidden;transition:transform 0.35s ease,box-shadow 0.35s ease;cursor:pointer} .video-card:hover{ transform:translateY(-6px);box-shadow:0 12px 36px rgba(0,0,0,0.35),0 0 20px rgba(255,106,0,0.10)} .video-wrap{ position:relative;overflow:hidden;border-radius:14px 14px 0 0} .video-wrap video{ width:100%;height:220px;object-fit:cover;border-radius:14px 14px 0 0;display:block;transition:transform 0.4s ease} .video-card:hover .video-wrap video{ transform:scale(1.05)} .video-overlay{ position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,0.6),transparent 60%);pointer-events:none;border-radius:14px 14px 0 0} .video-play-icon{ position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:48px;height:48px;background:rgba(255,106,0,0.85);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:opacity 0.3s ease,transform 0.3s ease;pointer-events:none} .video-play-icon svg{ width:20px;height:20px;fill:#fff;margin-left:2px} .video-card.is-playing .video-play-icon{ opacity:0;transform:translate(-50%,-50%) scale(0.8)} .video-card-body{ padding:18px 20px 22px} .video-card-title{ font-size:16px;font-weight:700;color:var(--c-heading);margin-bottom:6px;line-height:1.35} .video-card-desc{ font-size:13px;color:var(--c-text-dim);line-height:1.55;margin:0} @media (max-width:1024px){ .video-grid{ grid-template-columns:repeat(2,1fr)} } @media (max-width:768px){ .video-grid{ grid-template-columns:1fr;max-width:480px;margin:0 auto} .video-wrap video{ height:200px} } @media (max-width:480px){ .video-wrap video{ height:180px} .video-card-body{ padding:14px 16px 18px} } .modal-overlay{ display:none;position:fixed;inset:0;background:rgba(0,0,0,0.65);z-index:9999;justify-content:center;align-items:center;padding:20px} .modal-overlay.open{ display:flex} .modal-content{ background:var(--c-card);border-radius:16px;padding:36px 32px;max-width:480px;width:100%;position:relative;border:1px solid var(--c-border);box-shadow:0 20px 60px rgba(0,0,0,0.5);animation:modalIn 0.25s ease} @keyframes modalIn{ from{ opacity:0;transform:translateY(20px) scale(0.97)} to{ opacity:1;transform:translateY(0) scale(1)} } .modal-close{ position:absolute;top:12px;right:16px;font-size:28px;color:var(--c-text-dim);background:none;border:none;cursor:pointer;line-height:1;transition:color 0.2s} .modal-close:hover{ color:var(--c-white)} .modal-content h2{ font-size:22px;color:var(--c-heading);margin-bottom:24px} .modal-content .form-group{ margin-bottom:16px} .modal-content .form-group label{ display:block;font-size:13px;font-weight:600;color:var(--c-text);margin-bottom:6px} .modal-content .form-group input,.modal-content .form-group textarea{ width:100%;padding:10px 14px;border-radius:8px;border:1px solid var(--c-border);background:var(--c-bg);color:var(--c-white);font-size:14px;outline:none;transition:border-color 0.2s} .modal-content .form-group input:focus,.modal-content .form-group textarea:focus{ border-color:var(--c-accent)} .modal-content .form-group textarea{ resize:vertical;min-height:80px} .floating-btn-group{ position:fixed;bottom:28px;right:28px;z-index:9980;display:flex;flex-direction:column;gap:12px} .floating-btn{ width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;color:#fff;border:none;cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,0.35);transition:transform 0.2s,box-shadow 0.2s;text-decoration:none} .floating-btn:hover{ transform:scale(1.1);box-shadow:0 6px 24px rgba(0,0,0,0.45)} .floating-btn.whatsapp{ background:#25D366} .floating-btn.inquiry{ background:var(--c-accent)} @media (max-width:768px){ .floating-btn-group{ bottom:18px;right:18px} .floating-btn{ width:46px;height:46px;font-size:16px} } .carousel-wrapper{ position:relative} .carousel-track-wrap{ overflow:hidden;margin:0 -12px;padding:12px} .carousel-track{ display:flex;gap:24px;transition:transform 0.45s cubic-bezier(0.25,0.8,0.25,1);cursor:grab;user-select:none} .carousel-track:active{ cursor:grabbing} .carousel-track > *{ flex:0 0 calc(25% - 18px);min-width:0} .carousel-btn{ position:absolute;top:-52px;width:40px;height:40px;border-radius:50%;border:1.5px solid rgba(255,255,255,0.25);background:rgba(255,255,255,0.08);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background 0.2s,border-color 0.2s;z-index:5} .carousel-btn:hover{ background:rgba(255,255,255,0.18);border-color:var(--c-accent)} .carousel-btn.prev{ right:52px} .carousel-btn.next{ right:0} .carousel-btn svg{ width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} .carousel-btn:hover svg{ stroke:var(--c-accent)} .section-header{ position:relative} .card-dark.card-case{ height:auto;min-height:420px;display:flex;flex-direction:column} .card-case .card-case-body{ display:flex;flex-direction:column;flex:1} .card-case .card-case-desc{ flex:1;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical} .industries-section{ padding-top:40px !important} .industries-section .section-header{ margin-bottom:20px} .industries-grid-4x2{ display:grid;grid-template-columns:repeat(4,1fr);gap:24px} .industries-grid-4x2 .card-dark{ height:auto;min-height:320px} .industry-card{ background:#FFFFFF;border:1px solid #E5E7EB;border-radius:var(--r-md);overflow:hidden;transition:border-color 0.3s,transform 0.3s,box-shadow 0.3s;display:flex;flex-direction:column;min-height:340px} .industry-card:hover{ border-color:var(--c-accent);transform:translateY(-6px);box-shadow:0 12px 36px rgba(0,0,0,0.10),0 0 20px rgba(255,106,0,0.08)} .industry-img{ position:relative;width:100%;height:200px;overflow:hidden;background:var(--c-bg-light);flex-shrink:0} .industry-img img{ width:100%;height:100%;object-fit:cover;transition:transform 0.4s ease} .industry-card:hover .industry-img img{ transform:scale(1.05)} .industry-overlay{ position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,0.5) 0%,transparent 60%);pointer-events:none;opacity:0;transition:opacity 0.3s ease} .industry-card:hover .industry-overlay{ opacity:1} .industry-body{ padding:20px;display:flex;flex-direction:column;flex:1} .industry-title{ font-size:17px;font-weight:700;color:var(--c-heading-dark);margin-bottom:10px;line-height:1.35} .industry-desc{ font-size:13px;color:var(--c-text-dark);line-height:1.6;flex:1;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:14px} .industry-link{ font-size:13px;font-weight:600;color:var(--c-accent);display:inline-flex;align-items:center;gap:6px;transition:gap 0.3s ease,color 0.3s;margin-top:auto} .industry-link:hover{ gap:10px;color:var(--c-accent-h)} .industry-link span{ transition:transform 0.3s ease;display:inline-block} .industry-link:hover span{ transform:translateX(4px)} @media (max-width:1024px){ .industry-card{ min-height:300px} .industry-img{ height:180px} } @media (max-width:768px){ .industry-card{ min-height:auto} .industry-img{ height:200px} } @media (max-width:480px){ .industry-img{ height:180px} } @media (max-width:1024px){ .carousel-track > *{ flex:0 0 calc(33.333% - 16px)} .industries-grid-4x2{ grid-template-columns:repeat(2,1fr)} } @media (max-width:768px){ .carousel-track > *{ flex:0 0 calc(100% - 0px)} .carousel-btn{ top:-46px;width:36px;height:36px} .carousel-btn.prev{ right:44px} .industries-grid-4x2{ grid-template-columns:1fr} } .hero-home + section{ margin-top:0 !important;padding-top:40px !important} .card-footer{ display:flex;justify-content:space-between;gap:8px;margin-top:20px;padding-top:16px;border-top:1px solid rgba(255,255,255,0.06)} .card-metric{ display:flex;flex-direction:column;align-items:center;flex:1;min-width:0} .card-metric strong{ color:#ff6a00;font-size:14px;font-weight:700;line-height:1.3;white-space:nowrap} .card-metric span{ font-size:11px;color:var(--c-text-dim);text-transform:uppercase;letter-spacing:0.4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .carousel-wrapper .carousel-track-wrap{ margin-left:0;padding-left:0} .about-section{ background:var(--c-bg-light);padding:100px 0} .about-layout{ display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start} .about-left{ display:flex;flex-direction:column;gap:24px} .about-image-wrap{ position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,0.15)} .about-image{ width:100%;height:400px;object-fit:cover;transition:transform 0.5s ease} .about-image-wrap:hover .about-image{ transform:scale(1.03)} .about-experience-badge{ position:absolute;bottom:24px;right:24px;background:var(--c-accent);color:white;padding:20px 28px;border-radius:var(--r-md);text-align:center;box-shadow:0 10px 30px rgba(255,106,0,0.3)} .badge-number{ display:block;font-size:36px;font-weight:800;line-height:1} .badge-text{ display:block;font-size:13px;font-weight:500;margin-top:4px;opacity:0.95} .about-stats{ display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .stat-item{ background:white;padding:24px 16px;border-radius:var(--r-md);text-align:center;box-shadow:0 4px 20px rgba(0,0,0,0.06);display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:2px} .stat-number{ font-size:28px;font-weight:800;color:var(--c-accent);line-height:1} .stat-suffix{ font-size:18px;font-weight:700;color:var(--c-accent)} .stat-label{ width:100%;font-size:12px;color:var(--c-text-dark);margin-top:8px;font-weight:500} .about-right{ padding-top:20px} .about-section .section-eyebrow{ color:var(--c-accent);font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:1px;margin-bottom:16px} .about-title{ font-size:36px;font-weight:700;color:var(--c-heading-dark);line-height:1.3;margin-bottom:24px} .about-desc{ font-size:15px;color:var(--c-text-dark);line-height:1.8;margin-bottom:16px} .about-features{ margin:32px 0;display:flex;flex-direction:column;gap:14px} .about-feature-item{ display:flex;align-items:center;gap:12px} .feature-icon{ width:24px;height:24px;background:rgba(255,106,0,0.1);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0} .feature-text{ font-size:14px;color:var(--c-text-dark);font-weight:500} .about-cta{ margin-top:8px;display:inline-flex} @media (max-width:1024px){ .about-layout{ grid-template-columns:1fr;gap:40px} .about-stats{ grid-template-columns:repeat(2,1fr)} .about-title{ font-size:28px} } @media (max-width:640px){ .about-section{ padding:60px 0} .about-image{ height:280px} .about-experience-badge{ padding:14px 20px} .badge-number{ font-size:28px} .about-stats{ grid-template-columns:repeat(2,1fr);gap:12px} .stat-item{ padding:18px 12px} .stat-number{ font-size:22px} } .why-choose-section{ background:var(--c-bg);padding:100px 0} .why-choose-section .section-header{ text-align:center;margin-bottom:60px} .why-choose-section .section-eyebrow{ color:var(--c-accent);font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:12px} .why-choose-section h2{ font-size:36px;font-weight:700;color:var(--c-heading);margin-bottom:16px} .why-choose-section p{ font-size:16px;color:var(--c-text);max-width:600px;margin:0 auto} .why-choose-grid{ display:grid;grid-template-columns:repeat(4,1fr);gap:24px} .why-card{ background:var(--c-bg-card);border:1px solid var(--c-border);border-radius:var(--r-lg);padding:40px 28px;text-align:center;transition:all 0.4s cubic-bezier(0.4,0,0.2,1);position:relative;overflow:hidden} .why-card::before{ content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--c-accent),var(--c-accent-h));transform:scaleX(0);transition:transform 0.4s ease} .why-card:hover{ transform:translateY(-8px);box-shadow:0 20px 40px rgba(0,0,0,0.3);border-color:rgba(255,106,0,0.3)} .why-card:hover::before{ transform:scaleX(1)} .why-icon-wrap{ width:72px;height:72px;background:rgba(255,106,0,0.1);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 24px;transition:all 0.3s ease} .why-card:hover .why-icon-wrap{ background:var(--c-accent);transform:scale(1.1)} .why-icon{ width:32px;height:32px;color:var(--c-accent);transition:color 0.3s ease} .why-card:hover .why-icon{ color:white} .why-title{ font-size:18px;font-weight:700;color:var(--c-heading);margin-bottom:12px} .why-desc{ font-size:14px;color:var(--c-text);line-height:1.7;margin-bottom:20px} .why-link{ font-size:14px;font-weight:600;color:var(--c-accent);transition:color 0.3s ease} .why-link:hover{ color:var(--c-accent-h)} @media (max-width:1024px){ .why-choose-grid{ grid-template-columns:repeat(2,1fr)} } @media (max-width:640px){ .why-choose-section{ padding:60px 0} .why-choose-section h2{ font-size:28px} .why-choose-grid{ grid-template-columns:1fr;gap:20px} .why-card{ padding:32px 24px} }