/* ═══════════════════════════════════════════════════ SRI — Critical CSS (above-fold only) Inline in for instant first paint ~14KB — Reset + Tokens + Hero + Ticker ═══════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════ RESET + BLEED-PROOF CONTAINER ═══════════════════════════════════════════════════════════ */ html { box-sizing: border-box; overflow-x: hidden; overscroll-behavior-x: none; } *, *::before, *::after { box-sizing: inherit; margin: 0; padding: 0; } html, body { width: 100%; max-width: 100vw; overflow-x: hidden; overscroll-behavior-x: none; } /* ═══════════════════════════════════════════════════════════ DESIGN TOKENS ═══════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════ BASE ═══════════════════════════════════════════════════════════ */ body { font-family: 'Inter', system-ui, -apple-system, sans-serif; font-size: 16px; line-height: 1.6; background: #F7F9FC; color: #0B1D35; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } :focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(19,83,200,0.32), 0 0 0 6px rgba(19,83,200,0.10) !important; border-radius: 10px !important; z-index: 10; position: relative; } .wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding-top: 0; padding-bottom: 0; padding-left: max(clamp(20px, 4vw, 56px), env(safe-area-inset-left, 0px)); padding-right: max(clamp(20px, 4vw, 56px), env(safe-area-inset-right, 0px)); } /* ═══════════════════════════════════════════════════════════ TICKER ═══════════════════════════════════════════════════════════ */ .ticker { background: #0B1D35; overflow: hidden; padding: 13px env(safe-area-inset-right, 0) 13px env(safe-area-inset-left, 0); border-bottom: 1px solid rgba(255,255,255,0.06); width: 100%; position: relative; } .ticker::before, .ticker::after { content: ''; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 2; pointer-events: none; } .ticker::before { left: 0; background: linear-gradient(90deg, #0B1D35, transparent); } .ticker::after { right: 0; background: linear-gradient(-90deg, #0B1D35, transparent); } .ticker-track { display: flex; width: max-content; animation: scroll-ticker 40s linear infinite; will-change: transform; } @keyframes scroll-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } } .ticker:hover .ticker-track, .ticker:focus-within .ticker-track { animation-play-state: paused; } .t-item { display: inline-flex; align-items: center; gap: 10px; padding: 0 52px; white-space: nowrap; font-size: 12px; font-weight: 600; letter-spacing: 0.035em; color: rgba(255,255,255,0.72); } .t-item b { color: #FCD34D; font-weight: 700; } .t-dot { width: 5px; height: 5px; border-radius: 50%; background: #FCD34D; flex-shrink: 0; animation: pulse-dot 2.4s ease-in-out infinite; } @keyframes pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.3; transform: scale(1.7); } } .t-sep { color: rgba(255,255,255,0.12); font-size: 11px; padding: 0 4px; } /* ═══════════════════════════════════════════════════════════ HERO ═══════════════════════════════════════════════════════════ */ .hero { width: 100%; background: #FFFFFF; position: relative; overflow: hidden; border-bottom: 1px solid #D5DDE8; } .hero-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } .hero-bg::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: linear-gradient(rgba(19,83,200,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(19,83,200,0.035) 1px, transparent 1px); background-size: 60px 60px; } .hero-bg::after { content: ''; position: absolute; top: -200px; left: 50%; transform: translateX(-20%); width: 700px; height: 700px; background: radial-gradient(ellipse, rgba(19,83,200,0.055) 0%, transparent 68%); } .hero-stripe { height: 3px; background: linear-gradient(90deg, #0B1D35 0%, #1353C8 50%, #0B1D35 100%); width: 100%; } .hero-inner { position: relative; z-index: 1; padding: 72px 0 80px; } .hero-grid { display: grid; grid-template-columns: 1fr 380px; gap: 72px; align-items: center; } /* ── Badge ── */ .badge { display: inline-flex; align-items: center; gap: 8px; background: #ECFDF5; border: 1px solid #6EE7B7; color: #065F46; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 8px 18px 8px 14px; border-radius: 100px; margin-bottom: 32px; animation: fade-up 0.5s 0.05s ease both; line-height: 1.6; max-width: 100%; } .badge-pulse { width: 7px; height: 7px; border-radius: 50%; background: #065F46; flex-shrink: 0; animation: pulse-dot 2s infinite; margin-top: 2px; align-self: flex-start; } .hero-h1 { font-family: 'Cormorant Garamond', 'Georgia', serif; font-size: clamp(44px, 5.5vw, 68px); font-weight: 700; color: #0B1D35; line-height: 1.05; letter-spacing: -0.01em; margin: 0 0 24px; animation: fade-up 0.55s 0.1s ease both; } .hero-h1 em { font-style: italic; color: #1353C8; font-weight: 600; } .hero-sub { font-size: clamp(16px, 1.6vw, 18px); color: #34567A; line-height: 1.75; max-width: 560px; margin: 0 0 32px; animation: fade-up 0.55s 0.1s ease both; font-weight: 400; } .hero-sub strong { color: #0B1D35; font-weight: 700; } /* ── Scam pills ── */ .pills-wrap { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; animation: fade-up 0.55s 0.24s ease both; } .chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: #34567A; background: #F7F9FC; border: 1.5px solid #D5DDE8; padding: 6px 14px; border-radius: 100px; white-space: nowrap; transition: border-color 0.1s, color 0.1s, background 0.1s; cursor: default; } .chip:hover { border-color: #1353C8; color: #1353C8; background: #E8EFFC; } .chip-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; } .c-red { background: #DC2626; } .c-amber { background: #D97706; } .c-blue { background: #1353C8; } .c-teal { background: #0891B2; } .c-pink { background: #BE185D; } .c-violet { background: #7C3AED; } .c-green { background: #065F46; } .c-slate { background: #546E8F; } /* ── Do-not strip ── */ .donot { background: #FEF2F2; border: 1.5px solid #FECACA; border-left: 4px solid #DC2626; border-radius: 14px; padding: 16px 20px; margin-bottom: 36px; animation: fade-up 0.55s 0.3s ease both; } .donot-label { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.09em; color: #991B1B; margin-bottom: 12px; } .donot-items { display: flex; flex-direction: column; gap: 8px; } .donot-row { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; font-weight: 500; color: #7F1D1D; line-height: 1.5; } .donot-icon { width: 18px; height: 18px; border-radius: 50%; background: rgba(220,38,38,0.12); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 900; color: #DC2626; flex-shrink: 0; margin-top: 2px; } /* ── CTA ── */ .cta-group { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; animation: fade-up 0.55s 0.36s ease both; } .btn-rescue { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 10px; background: #1353C8 !important; background-color: #1353C8 !important; background-image: none !important; color: #ffffff !important; font-family: 'Inter', system-ui, -apple-system, sans-serif !important; font-size: 15px !important; font-weight: 700 !important; letter-spacing: 0.01em; padding: 0 32px !important; height: 56px; border-radius: 14px !important; text-decoration: none !important; border: none !important; outline: none; cursor: pointer; min-width: 220px; box-shadow: 0 4px 16px rgba(19,83,200,0.35); transition: background 0.1s, transform 0.1s, box-shadow 0.1s; -webkit-appearance: none !important; appearance: none !important; white-space: nowrap; } .btn-rescue:hover { background: #0F42A0 !important; background-color: #0F42A0 !important; color: #ffffff !important; transform: translateY(-2px) !important; box-shadow: 0 8px 28px rgba(19,83,200,0.45) !important; } .btn-rescue:active { transform: translateY(0) !important; } .btn-rescue:visited { color: #ffffff !important; } .btn-arrow { font-size: 18px; display: inline-block; transition: transform 0.1s; } .btn-rescue:hover .btn-arrow { transform: translateX(4px); } .cta-note { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: #546E8F; } .cta-note svg { color: #065F46; flex-shrink: 0; } /* ── Shield card (right column) ── */ .hero-right { display: flex; flex-direction: column; gap: 12px; animation: fade-up 0.6s 0.15s ease both; } .shield-card { background: #0B1D35; border-radius: 20px; padding: 36px 28px 28px; text-align: center; position: relative; overflow: hidden; box-shadow: 0 24px 64px rgba(11,29,53,0.22); } .shield-card::before { content: ''; position: absolute; top: -60px; right: -60px; width: 220px; height: 220px; background: radial-gradient(circle, rgba(59,116,224,0.18) 0%, transparent 65%); pointer-events: none; } .shield-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #FCD34D, #F59E0B, #FCD34D); } .shield-svg-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 20px; } .shield-glow { position: absolute; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle, rgba(59,116,224,0.22) 0%, transparent 70%); animation: glow-breathe 3.5s ease-in-out infinite; } @keyframes glow-breathe { 0%, 100% { transform: scale(1); opacity: 0.65; } 50% { transform: scale(1.3); opacity: 1; } } .shield-kicker { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.70); margin-bottom: 20px; } .stat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .stat-box { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; padding: 14px 16px; text-align: left; } .stat-num { font-family: 'Cormorant Garamond', 'Georgia', serif; font-size: 28px; font-weight: 700; color: #fff; line-height: 1; margin-bottom: 5px; } .stat-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: rgba(255,255,255,0.70); } /* ── Trust tiles ── */ .trust-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .trust-tile { background: #FFFFFF; border: 1.5px solid #D5DDE8; border-radius: 14px; padding: 14px 16px; display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: #34567A; box-shadow: 0 2px 8px rgba(11,29,53,0.06), 0 0 1px rgba(11,29,53,0.08); } .tile-icon { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 16px; } .t-green { background: #E8EFFC; } .t-blue { background: #E8EFFC; } .t-amber { background: #E8EFFC; } .t-red { background: #E8EFFC; } /* ── Proof bar ── */ .proof-bar { overflow: hidden; padding: 28px 0 32px; margin-top: 48px; border-top: 1.5px solid #D5DDE8; position: relative; animation: fade-up 0.55s 0.44s ease both; } /* Fade edges for seamless feel */ .proof-bar::before, .proof-bar::after { content: ''; position: absolute; top: 0; bottom: 0; width: 72px; z-index: 2; pointer-events: none; } .proof-bar::before { left: 0; background: linear-gradient(90deg, #FFFFFF, transparent); } .proof-bar::after { right: 0; background: linear-gradient(-90deg, #FFFFFF, transparent); } .proof-track { display: flex; width: max-content; align-items: center; animation: proof-scroll 28s linear infinite; will-change: transform; } .proof-bar:hover .proof-track { animation-play-state: paused; } @keyframes proof-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } .proof-item { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 600; color: #34567A; white-space: nowrap; padding: 0 36px; flex-shrink: 0; } .proof-item .p-icon { width: 22px; height: 22px; border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .proof-item .p-icon svg { display: block; } .pi-shield { background: #ECFDF5; color: #059669; } .pi-check { background: #EFF6FF; color: #1353C8; } .pi-law { background: #FFFBEB; color: #D97706; } .pi-ban { background: #FEF2F2; color: #DC2626; } .proof-div { width: 1px; height: 20px; background: #D5DDE8; flex-shrink: 0; } /* ── Critical responsive (hero only) ── */ @media (max-width: 640px) { .wrap { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); } .hero-inner { padding: 36px 0 44px; } .hero-h1 { font-size: clamp(32px, 8vw, 42px); margin-bottom: 18px; } .hero-sub { font-size: 15px; line-height: 1.7; margin-bottom: 24px; } .cta-group { gap: 14px; flex-direction: column; align-items: center; text-align: center; } .btn-rescue { width: 100% !important; min-width: unset !important; } .cta-note { justify-content: center; text-align: center; } } @media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; gap: 40px; } .hero-right { max-width: 500px; margin: 0 auto; width: 100%; } }