/* Google Fonts loaded via in each page's for better performance */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --red: #d9100a; --red-dark: #b00d08; --red-light:#fdf1f1; --dark: #1c1c1c; --mid: #444; --gray: #6b6b6b; --border: #e4e4e4; --bg: #f7f7f7; --white: #ffffff; --nav-h: 68px; } html { scroll-behavior: smooth; overflow-x: hidden; max-width: 100%; } body { font-family: 'Inter', 'Segoe UI', Arial, sans-serif; color: var(--dark); line-height: 1.65; font-size: 15px; background: var(--white); overflow-x: hidden; position: relative; max-width: 100%; user-select: none; -webkit-user-select: none; } a { text-decoration: none; color: inherit; } img { display: block; max-width: 100%; } ul { list-style: none; } /* ── TOPBAR ── */ .topbar { background: #181818; color: #aaa; font-size: 0.8rem; padding: 7px 0; border-bottom: 1px solid #2a2a2a; } .topbar .wrap { max-width: 1200px; margin: 0 auto; padding: 0 28px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; } .topbar .tb-left { display: flex; gap: 24px; align-items: center; } .topbar .tb-left span { display: flex; align-items: center; gap: 7px; } .topbar .tb-right a { color: #aaa; margin-left: 18px; transition: color .2s; } .topbar .tb-right a:hover { color: var(--red); } /* ── NAV ── */ nav { background: var(--white); box-shadow: 0 1px 0 var(--border), 0 2px 12px rgba(0,0,0,.06); position: sticky; top: 0; z-index: 900; height: var(--nav-h); } .nav-wrap { max-width: 1200px; margin: 0 auto; padding: 0 28px; height: 100%; display: flex; align-items: center; justify-content: space-between; } .nav-logo { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .nav-logo img { height: 44px; width: auto; object-fit: contain; } .nav-logo-text { line-height: 1.3; } .nav-logo-text .name { font-size: 0.95rem; font-weight: 700; color: var(--dark); } .nav-logo-text .tagline { font-size: 0.68rem; color: var(--red); font-weight: 600; text-transform: uppercase; letter-spacing: .8px; } .nav-menu { display: flex; align-items: center; gap: 2px; } .nav-item { position: relative; } .nav-item > a { display: flex; align-items: center; gap: 5px; padding: 8px 14px; font-size: 0.82rem; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; color: var(--mid); border-radius: 4px; transition: color .2s, background .2s; white-space: nowrap; } .nav-item > a:hover, .nav-item > a.active { color: var(--red); background: var(--red-light); } .nav-item > a .caret { font-size: 0.6rem; margin-top: 1px; transition: transform .2s; } .nav-item:hover > a .caret { transform: rotate(180deg); } .nav-item::after { content: ''; position: absolute; bottom: -8px; left: 0; right: 0; height: 8px; } .dropdown { display: none; position: absolute; top: calc(100% + 8px); left: 0; background: var(--white); border: 1px solid var(--border); border-top: 2px solid var(--red); border-radius: 0 0 6px 6px; box-shadow: 0 8px 24px rgba(0,0,0,.1); min-width: 210px; overflow: hidden; } .nav-item:hover .dropdown { display: block; } .dropdown .dropdown-inner a { display: block; } .dropdown a { display: block; padding: 11px 18px; font-size: 0.82rem; font-weight: 500; color: var(--mid); border-bottom: 1px solid #f2f2f2; transition: background .15s, color .15s; } .dropdown a:last-child { border-bottom: none; } .dropdown a:hover { background: var(--red-light); color: var(--red); } .nav-cta { display: inline-flex; align-items: center; gap: 7px; background: var(--red); color: #fff; padding: 9px 20px; border-radius: 4px; font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; margin-left: 12px; transition: background .2s, transform .2s; white-space: nowrap; } .nav-cta:hover { background: var(--red-dark); transform: translateY(-1px); } .hamburger { display: none; background: none; border: 1px solid var(--border); border-radius: 4px; width: 40px; height: 36px; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; } .hamburger span { display: block; width: 20px; height: 2px; background: var(--dark); border-radius: 2px; } /* ── PAGE HEADER (inner pages) ── */ .page-header { background: linear-gradient(105deg, #1a1a2e 0%, #16213e 60%, #1a2a3a 100%); padding: 60px 28px 56px; color: #fff; position: relative; overflow: hidden; max-width: 100%; } .page-header::after { content: ''; position: absolute; right: -80px; top: -80px; width: 380px; height: 380px; border-radius: 50%; background: rgba(217,16,10,.1); animation: orbDrift1 10s ease-in-out infinite; } .page-header::before { content: ''; position: absolute; left: -60px; bottom: -60px; width: 260px; height: 260px; border-radius: 50%; background: rgba(255,255,255,.025); animation: orbDrift2 14s ease-in-out infinite; } .page-header .wrap { max-width: 1200px; margin: 0 auto; position: relative; z-index: 1; } .breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; color: rgba(255,255,255,.5); margin-bottom: 16px; } .breadcrumb a { color: rgba(255,255,255,.5); transition: color .2s; } .breadcrumb a:hover { color: #fff; } .breadcrumb span { color: rgba(255,255,255,.3); } .page-header h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 800; line-height: 1.2; margin-bottom: 12px; } .page-header h1 em { color: var(--red); font-style: normal; } .page-header p { font-size: 1rem; color: rgba(255,255,255,.7); max-width: 580px; } /* ── LAYOUT ── */ .wrap { max-width: 1200px; margin: 0 auto; padding: 0 28px; } .section { padding: 80px 28px; } .section-sm { padding: 60px 28px; } .section-dark { background: #111827; color: #fff; } .section-gray { background: var(--bg); } .section-intro { margin-bottom: 52px; } .section-intro .eyebrow { font-size: 0.73rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: var(--red); margin-bottom: 10px; display: flex; align-items: center; gap: 10px; } .section-intro .eyebrow::after { content: ''; flex: 0 0 32px; height: 2px; background: var(--red); } .section-intro h2 { font-size: clamp(1.55rem, 3.5vw, 2.3rem); font-weight: 800; line-height: 1.25; margin-bottom: 14px; } .section-intro h2 em { color: var(--red); font-style: normal; } .section-intro p { font-size: 0.97rem; color: var(--gray); max-width: 620px; line-height: 1.75; } .section-dark .section-intro .eyebrow { color: rgba(255,255,255,.5); } .section-dark .section-intro .eyebrow::after { background: rgba(255,255,255,.3); } .section-dark .section-intro h2 { color: #fff; } .section-dark .section-intro p { color: rgba(255,255,255,.6); } /* ── BUTTONS ── */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 26px; border-radius: 4px; font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: .5px; border: 2px solid transparent; cursor: pointer; transition: all .2s; white-space: nowrap; } .btn-red { background: var(--red); color: #fff; border-color: var(--red); } .btn-red:hover { background: var(--red-dark); border-color: var(--red-dark); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(217,16,10,.3); } .btn-outline { background: transparent; color: var(--dark); border-color: var(--border); } .btn-outline:hover { border-color: var(--red); color: var(--red); } .btn-outline-white { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); } .btn-outline-white:hover { border-color: #fff; background: rgba(255,255,255,.08); } .btn-white { background: #fff; color: var(--red); border-color: #fff; } .btn-white:hover { background: #f5f5f5; transform: translateY(-1px); } /* ── CARDS ── */ .cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .cards-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .cards-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .card { background: var(--white); border: 1px solid var(--border); border-radius: 8px; padding: 32px 28px; display: flex; flex-direction: column; transition: box-shadow .2s, transform .2s, border-color .2s; } .card:hover { box-shadow: 0 8px 32px rgba(0,0,0,.1); transform: translateY(-3px); border-color: #d0d0d0; } .card-top-red { border-top: 3px solid var(--red); } .card .card-icon { width: 48px; height: 48px; background: var(--red-light); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--red); font-size: 1.1rem; margin-bottom: 20px; flex-shrink: 0; } .card h3 { font-size: 1rem; font-weight: 700; margin-bottom: 10px; color: var(--dark); } .card p { font-size: 0.88rem; color: var(--gray); line-height: 1.75; flex: 1; } .card-list { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 16px; } .card-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.84rem; color: var(--gray); padding: 7px 0; border-bottom: 1px solid #f4f4f4; } .card-list li:last-child { border-bottom: none; } .card-list li i { color: var(--red); margin-top: 2px; flex-shrink: 0; font-size: 0.7rem; } /* ── FOOTER ── */ footer { background: #fff; color: var(--gray); border-top: 1px solid var(--border); } .footer-main { max-width: 1200px; margin: 0 auto; padding: 64px 28px 48px; display: grid; grid-template-columns: 2.2fr 1fr 1fr 1fr; gap: 48px; } .footer-brand img { display: block; width: 100%; max-width: 353px; height: auto; margin-bottom: 8px; } .footer-brand p { font-size: 0.85rem; line-height: 1.75; color: var(--gray); margin: 12px 0 20px; } .footer-brand .f-contact p { display: flex; align-items: flex-start; gap: 10px; font-size: 0.84rem; margin-bottom: 10px; color: var(--gray); } .footer-brand .f-contact i { color: var(--red); margin-top: 3px; flex-shrink: 0; } .footer-col h4 { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: var(--dark); margin-bottom: 20px; padding-bottom: 10px; border-bottom: 2px solid var(--red); display: inline-block; } .footer-col ul li { margin-bottom: 10px; } .footer-col ul li a { font-size: 0.84rem; color: var(--gray); transition: color .2s; } .footer-col ul li a:hover { color: var(--red); } .footer-bottom { border-top: 1px solid var(--border); padding: 20px 28px; max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 0.8rem; } .footer-bottom a { color: var(--red); } /* ── BACK TO TOP ── */ #backToTop { position: fixed; bottom: 90px; right: 28px; width: 44px; height: 44px; background: var(--red); color: #fff; border: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.95rem; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.2); z-index: 998; opacity: 0; transform: translateY(16px); transition: opacity .3s, transform .3s; pointer-events: none; } #backToTop.visible { opacity: 1; transform: translateY(0); pointer-events: auto; } #backToTop:hover { background: var(--red-dark); transform: translateY(-2px); } /* ── WHATSAPP ── */ .wa-btn { position: fixed; bottom: 28px; right: 28px; width: 54px; height: 54px; background: #25d366; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(0,0,0,.25); z-index: 999; transition: transform .2s, box-shadow .2s; color: #fff; font-size: 1.4rem; } .wa-btn:hover { transform: scale(1.1); box-shadow: 0 6px 28px rgba(0,0,0,.3); } /* ── RESPONSIVE: TABLET ── */ @media (max-width: 1024px) { .cards-3 { grid-template-columns: repeat(2, 1fr); } .cards-4 { grid-template-columns: repeat(2, 1fr); } .footer-main { grid-template-columns: 1fr 1fr; gap: 36px; } } /* ── RESPONSIVE: MOBILE ── */ @media (max-width: 768px) { /* topbar — hide completely */ .topbar { display: none !important; } /* nav */ :root { --nav-h: 60px; } .nav-wrap { padding: 0 14px; position: relative; } .nav-logo { gap: 10px; min-width: 0; flex-shrink: 1; } .nav-logo img { height: 36px; flex-shrink: 0; } /* hide text on mobile — logo alone is enough */ .nav-logo-text { display: none; } .hamburger { display: flex; flex-shrink: 0; } .nav-menu { display: none; flex-direction: column; align-items: stretch; position: absolute; top: var(--nav-h); left: 0; right: 0; background: var(--white); border-top: 2px solid var(--red); box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: 8px 0 16px; z-index: 899; max-height: calc(100vh - var(--nav-h)); overflow-y: auto; } .nav-menu.open { display: flex; } .nav-item { width: 100%; } .nav-item > a { border-radius: 0; width: 100%; padding: 13px 20px; font-size: 0.88rem; justify-content: space-between; border-bottom: 1px solid #f2f2f2; } .nav-item > a.mob-active { color: var(--red); background: var(--red-light); } .nav-item > a.mob-active .caret { transform: rotate(180deg); } /* bridge not needed on mobile */ .nav-item::after { display: none; } /* mobile accordion dropdown */ .dropdown { display: none; position: static; border: none; box-shadow: none; border-radius: 0; background: var(--bg); border-left: 3px solid var(--red); margin-left: 20px; } .dropdown.mob-open { display: block; } .dropdown a { padding: 11px 20px; font-size: 0.84rem; border-bottom: 1px solid var(--border); } .dropdown a:last-child { border-bottom: none; } .nav-cta { margin: 12px 16px 4px; border-radius: 4px; justify-content: center; } /* page header */ .page-header { padding: 40px 16px 36px; } .page-header h1 { font-size: 1.7rem; } .page-header p { font-size: 0.9rem; } .breadcrumb { font-size: 0.72rem; } /* layout */ .wrap { padding: 0 16px; } .section { padding: 44px 16px; } .section-sm { padding: 36px 16px; } .section-intro { margin-bottom: 32px; } .section-intro h2 { font-size: 1.5rem; } .section-intro p { font-size: 0.9rem; } /* ensure no section bleeds past viewport */ section, footer, nav, .stats-row { max-width: 100vw; } /* cards */ .cards-3, .cards-2, .cards-4 { grid-template-columns: 1fr; } .card { padding: 24px 20px; } /* buttons — stack in flex containers */ .btn { white-space: normal; text-align: center; justify-content: center; } /* footer */ .footer-main { grid-template-columns: 1fr; gap: 28px; padding: 40px 16px 28px; } .footer-bottom { flex-direction: column; text-align: center; padding: 16px; gap: 6px; } .footer-col { padding-bottom: 8px; border-bottom: 1px solid var(--border); } .footer-col:last-child { border-bottom: none; } /* whatsapp float — move slightly in from edge */ .wa-btn { bottom: 18px; right: 18px; width: 48px; height: 48px; font-size: 1.2rem; } /* disable decorative orb animations — not visible at this size, saves paint cost */ .page-header::after, .page-header::before { animation: none; } .orb { animation: none !important; } } /* ── RESPONSIVE: SMALL PHONES ── */ @media (max-width: 480px) { .section { padding: 36px 14px; } .section-intro h2 { font-size: 1.35rem; } .btn { padding: 11px 18px; font-size: 0.82rem; } .page-header { padding: 32px 14px 28px; } .page-header h1 { font-size: 1.4rem; } } /* ── RESPONSIVE: EXTRA SMALL (320px) ── */ @media (max-width: 360px) { .section { padding: 28px 12px; } .section-intro h2 { font-size: 1.2rem; } .card { padding: 20px 16px; } .page-header h1 { font-size: 1.25rem; } .topbar .tb-left { gap: 12px; font-size: 0.72rem; } } /* ── RESPONSIVE: LARGE SCREENS ── */ @media (min-width: 1440px) { .wrap, .nav-wrap, .footer-main, .footer-bottom { max-width: 1320px; } } /* ── ALLOW TEXT SELECTION IN FORM ELEMENTS ── */ input, textarea, select, [contenteditable] { user-select: text; -webkit-user-select: text; } /* ── CTA BANNER (global — shared across all pages) ── */ .cta-banner { padding: 72px 28px; text-align: center; color: #fff; display: flex; flex-direction: column; align-items: center; } .cta-banner h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); font-weight: 800; margin-bottom: 14px; } .cta-banner p { font-size: 0.97rem; opacity: .85; max-width: 560px; margin: 0 auto 36px; } .cta-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } @media (max-width: 768px) { .cta-banner { padding: 48px 16px; } .cta-banner h2 { font-size: 1.5rem; } .cta-banner p { font-size: 0.88rem; margin-bottom: 24px; } .cta-btns { flex-direction: column; align-items: stretch; gap: 10px; padding: 0 8px; } .cta-btns .btn { justify-content: center; } } @media (max-width: 480px) { .cta-banner { padding: 40px 14px; } .cta-banner h2 { font-size: 1.3rem; } } /* ── PAGE HEADER ENTRANCE (inner pages) ── */ @keyframes phIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } .page-header .breadcrumb { animation: phIn .5s ease .05s both; } .page-header h1 { animation: phIn .65s ease .18s both; } .page-header p { animation: phIn .55s ease .35s both; } /* ── WHATSAPP PULSE ── */ @keyframes waPulse { 0% { box-shadow: 0 4px 20px rgba(0,0,0,.25), 0 0 0 0 rgba(37,211,102,.5); } 70% { box-shadow: 0 4px 20px rgba(0,0,0,.25), 0 0 0 14px rgba(37,211,102,0); } 100% { box-shadow: 0 4px 20px rgba(0,0,0,.25), 0 0 0 0 rgba(37,211,102,0); } } .wa-btn { animation: waPulse 2.8s infinite; } .wa-btn:hover { animation: none; transform: scale(1.1); box-shadow: 0 6px 28px rgba(0,0,0,.3); } /* ── FLOATING ORBS (decorative) ── */ .orb { position: absolute; border-radius: 50%; pointer-events: none; will-change: transform; } .orb-red-lg { width: 420px; height: 420px; background: radial-gradient(circle, rgba(217,16,10,.14) 0%, transparent 70%); right: 4%; top: -10%; animation: orbDrift1 9s ease-in-out infinite; } .orb-red-sm { width: 200px; height: 200px; background: radial-gradient(circle, rgba(217,16,10,.09) 0%, transparent 70%); left: 8%; bottom: 5%; animation: orbDrift2 12s ease-in-out infinite; } .orb-white { width: 160px; height: 160px; background: radial-gradient(circle, rgba(255,255,255,.04) 0%, transparent 70%); left: 45%; top: 8%; animation: orbDrift3 15s ease-in-out infinite; } @keyframes orbDrift1 { 0%,100% { transform: translate(0,0) scale(1); } 33% { transform: translate(18px,-22px) scale(1.06); } 66% { transform: translate(-12px,12px) scale(0.96); } } @keyframes orbDrift2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-22px,-18px) scale(1.1); } } @keyframes orbDrift3 { 0%,100% { transform: translate(0,0); } 40% { transform: translate(22px,16px); } 80% { transform: translate(-16px,-12px); } } /* ── ICON HOVER LIFT (spring) ── */ .sp-icon, .card-icon, .fl-icon, .sg-icon, .bc-icon, .why-dot, .ci-icon, .bu-icon { transition: transform 0.38s cubic-bezier(.34,1.56,.64,1), background .2s, color .2s; } .sp-card:hover .sp-icon, .card:hover .card-icon, .fl-item:hover .fl-icon, .sg-item:hover .sg-icon, .bc:hover .bc-icon, .why-item:hover .why-dot, .ci-item:hover .ci-icon { transform: translateY(-8px) scale(1.15) rotate(-4deg); } /* ── 3D TILT SUPPORT ── */ .sp-card, .card, .pkg-card, .bu-card, .partner-card, .trust-item, .bc, .fl-item, .sc { transform-style: preserve-3d; } /* ── SCROLL ENTRANCE ANIMATIONS (enhanced) ── */ [data-animate] { opacity: 0; transition: opacity 0.75s cubic-bezier(.22,.68,0,1.1) var(--anim-delay, 0ms), transform 0.75s cubic-bezier(.22,.68,0,1.1) var(--anim-delay, 0ms); } [data-animate].is-visible { opacity: 1 !important; transform: none !important; } [data-animate="up"] { transform: translateY(48px); } [data-animate="left"] { transform: translateX(-48px); } [data-animate="right"] { transform: translateX(48px); } [data-animate="fade"] { transform: none; } [data-animate="scale"] { transform: scale(0.86); } /* Stagger grid animations (enhanced) */ [data-stagger] > * { opacity: 0; transform: translateY(36px); transition: opacity 0.6s cubic-bezier(.22,.68,0,1.1), transform 0.6s cubic-bezier(.22,.68,0,1.1); } /* Base visible state — only set here to keep specificity low, allowing hover transforms to work */ [data-stagger].is-visible > * { opacity:1; transform:none; } /* nth-child rules set ONLY transition-delay so they don't block hover/JS transforms */ [data-stagger].is-visible > * { transition-delay: 160ms; } /* ── CLICKABLE CLIENT CARD ── */ a.client-card { cursor: pointer; display: flex; } a.client-card .cc-web { color: var(--red); } /* ── CTA BANNER ENSURE OVERRIDE ── */ section.cta-banner h2, section.cta-banner p { color: #fff !important; } /* Reduce motion for accessibility */ @media (prefers-reduced-motion: reduce) { [data-animate], [data-stagger] > * { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; animation: none !important; } .wa-btn, .orb { animation: none !important; } }