/* ============================================= Infinite Protection - Enhanced CSS Animations | Responsive | Light/Dark Mode ============================================= */ /* ── Google Fonts ── */ @import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap'); /* ── CSS Variables ── */ :root { --bg-primary: #0c1b2a; --bg-secondary: #0a1628; --bg-card: rgba(255,255,255,0.05); --bg-card-hover: rgba(255,255,255,0.10); --text-primary: #ffffff; --text-muted: rgba(255,255,255,0.65); --text-dim: rgba(255,255,255,0.40); --green2: #02a351; --accent-green: #4ADE80; --accent-yellow: #FDB022; --border-card: rgba(255,255,255,0.10); --border-hover: rgba(255,255,255,0.25); --nav-bg: #0a1628; --shadow-card: 0 8px 32px rgba(0,0,0,0.3); --transition: 0.3s ease; --radius: 6px; --tp2-bg: #02080f; --tp2-card-blue: linear-gradient(135deg, rgba(5,18,35,0.95), rgba(8,22,42,0.98)); --tp2-card-green: linear-gradient(135deg, rgba(5,22,14,0.95), rgba(8,28,18,0.98)); --tp2-text: #ffffff; --tp2-subtext: rgba(255,255,255,0.55); /*pricing color setting*/ --bg: #050d1a; --surface: #0a1a35; --surface2: #0d2040; --border-blue: rgba(30,180,255,0.6); --border-green: rgba(0,230,120,0.65); --border-purple: rgba(170,90,255,0.6); --text: #e8f4ff; --text2: #7a9abf; --accent-blue: #1eb4ff; /*--accent-green: #00e87a;*/ --accent-purple: #aa5aff; --accent-gold: #e0a000; --grid-line: rgba(0,200,255,0.05); --chk-blue: rgba(30,180,255,0.18); --chk-green: rgba(0,230,120,0.18); --chk-purple: rgba(170,90,255,0.18); --pill-bg: #0a1a35; --pill-bd: rgba(30,180,255,0.22); --pill-icon-bg: rgba(30,180,255,0.1); --pill-icon-bd: rgba(30,180,255,0.28); /* Section-specific */ --eyp-bg: #020e1a; --eyp-panel: rgba(10,28,50,0.85); --eyp-panel-border: rgba(0,200,255,0.22); --eyp-table-head-bg: rgba(0,30,60,0.6); --eyp-table-row-bg: rgba(255,255,255,0.025); --eyp-table-row-alt: rgba(255,255,255,0.045); --eyp-sub-color: #4ADE80; --eyp-nonsub-color: rgba(255,255,255,0.55); --eyp-col-blue: rgba(74,174,255,0.15); --eyp-col-green: rgba(74,222,128,0.15); --eyp-grid-line: rgba(0,200,255,0.05); --eyp-pill-bg: rgba(0,200,80,0.08); --eyp-pill-border: rgba(0,200,80,0.35); --eyp-title-color: #ffffff; --eyp-desc-color: rgba(255,255,255,0.58); --eyp-badge-bg: rgba(0,50,20,0.6); --eyp-badge-border: rgba(74,222,128,0.55); --eyp-why-bg: rgba(10,28,50,0.7); --eyp-why-border: rgba(74,222,128,0.3); } body.light-mode { --bg-primary: #f0f4f8; --bg-secondary: #ffffff; --bg-card: rgba(0,0,0,0.04); --bg-card-hover: rgba(0,0,0,0.08); --text-primary: #0a1628; --text-muted: rgba(10,22,40,0.65); --text-dim: rgba(10,22,40,0.40); --border-card: rgba(0,0,0,0.10); --border-hover: rgba(0,0,0,0.25); --nav-bg: #ffffff; --shadow-card: 0 8px 32px rgba(0,0,0,0.10); --tp2-bg: #f4f7fb; --tp2-card-blue: #ffffff; --tp2-card-green: #ffffff; --tp2-text: #0b1220; --tp2-subtext: #5b6b7c; /*pricing color setting*/ --bg: #eef4ff; --surface: #ffffff; --surface2: #f4f9ff; --border-blue: rgba(0,100,210,0.5); --border-green: rgba(0,140,70,0.5); --border-purple: rgba(100,35,210,0.5); --text: #091828; --text2: #3a5a8a; --accent-blue: #0064d2; /*--accent-green: #008c46;*/ --accent-purple: #6423d2; --accent-gold: #b07800; --grid-line: rgba(0,100,200,0.06); --chk-blue: rgba(0,100,210,0.1); --chk-green: rgba(0,140,70,0.1); --chk-purple: rgba(100,35,210,0.1); --pill-bg: #ffffff; --pill-bd: rgba(0,100,200,0.18); --pill-icon-bg: rgba(0,100,200,0.07); --pill-icon-bd: rgba(0,100,200,0.22); --eyp-bg: #eef4ff; --eyp-panel: rgba(255,255,255,0.95); --eyp-panel-border: rgba(0,100,210,0.25); --eyp-table-head-bg: rgba(0,80,180,0.07); --eyp-table-row-bg: rgba(0,0,0,0.02); --eyp-table-row-alt: rgba(0,0,0,0.04); --eyp-sub-color: #009944; --eyp-nonsub-color: rgba(10,22,40,0.55); --eyp-col-blue: rgba(0,100,210,0.08); --eyp-col-green: rgba(0,160,70,0.08); --eyp-grid-line: rgba(0,100,200,0.06); --eyp-pill-bg: rgba(0,140,60,0.08); --eyp-pill-border: rgba(0,160,70,0.35); --eyp-title-color: #0a1628; --eyp-desc-color: rgba(10,22,40,0.6); --eyp-badge-bg: rgba(0,160,70,0.08); --eyp-badge-border: rgba(0,160,70,0.4); --eyp-why-bg: rgba(255,255,255,0.88); --eyp-why-border: rgba(0,160,70,0.3); } /* Dark mode — show dark logo, hide light logo */ .logo-light { display: none; } .logo-dark { display: block; } /* Light mode — show light logo, hide dark logo */ body.light-mode .logo-light { display: block; } body.light-mode .logo-dark { display: none; } /* ── Base ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--bg-primary); color: var(--text-primary); font-family: 'Inter', sans-serif; padding-top: 70px; transition: background var(--transition), color var(--transition); overflow-x: hidden; width:100%; } /* ── Scroll Reveal Animation Classes ── */ .reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.7s ease, transform 0.7s ease; } .reveal.visible { opacity: 1; transform: translateY(0); } .reveal-left { opacity: 0; transform: translateX(-40px); transition: opacity 0.7s ease, transform 0.7s ease; } .reveal-left.visible { opacity: 1; transform: translateX(0); } .reveal-right { opacity: 0; transform: translateX(40px); transition: opacity 0.7s ease, transform 0.7s ease; } .reveal-right.visible { opacity: 1; transform: translateX(0); } /* Staggered children */ .stagger-children > * { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease, transform 0.6s ease; } .stagger-children.visible > *:nth-child(1) { opacity:1; transform:translateY(0); transition-delay:0.05s; } .stagger-children.visible > *:nth-child(2) { opacity:1; transform:translateY(0); transition-delay:0.15s; } .stagger-children.visible > *:nth-child(3) { opacity:1; transform:translateY(0); transition-delay:0.25s; } .stagger-children.visible > *:nth-child(4) { opacity:1; transform:translateY(0); transition-delay:0.35s; } .stagger-children.visible > *:nth-child(5) { opacity:1; transform:translateY(0); transition-delay:0.45s; } .stagger-children.visible > *:nth-child(6) { opacity:1; transform:translateY(0); transition-delay:0.55s; } .stagger-children.visible > *:nth-child(7) { opacity:1; transform:translateY(0); transition-delay:0.65s; } .stagger-children.visible > *:nth-child(8) { opacity:1; transform:translateY(0); transition-delay:0.75s; } /* ============================================= NAVBAR ============================================= */ .navbar { background: var(--nav-bg)!important; padding: 15px 40px; position: fixed; z-index: 9999; top: 0; left:0; width: 100%; box-shadow: 0 2px 16px rgba(0,0,0,0.15); transition: top 0.35s ease, background var(--transition), box-shadow var(--transition), padding 0.3s ease; } .navbar, .navbar .nav-link, .navbar .navbar-brand, .navbar .login-btn { color: var(--text-primary) !important; } .navbar.scrolled { padding: 10px 40px; box-shadow: 0 4px 24px rgba(0,0,0,0.25); } .nav-link { color: var(--text-muted) !important; margin-left: 10px; transition: color var(--transition); position: relative; } .nav-link::after { content: ''; position: absolute; bottom: -3px; left: 0; width: 0; height: 2px; background: var(--accent-green); transition: width var(--transition); border-radius: 2px; } .nav-link:hover { color: var(--text-primary) !important; } .nav-link:hover::after { width: 100%; } .navbar-brand { color: var(--text-primary) !important; font-family: 'Sora', sans-serif; font-weight: 600; transition: color var(--transition); } .talk-btn { border-radius: 10px; padding: 8px 18px; } .login-btn { color: var(--text-primary) !important; padding: 8px 16px; border-radius: 8px; transition: color var(--transition); } .navbar .dropdown:hover .dropdown-menu { display: block; margin-top: 0; } .dropdown-menu { display: none; background: #162b40; border: none; border-radius: 10px; animation: fadeDown 0.2s ease; } body.light-mode .dropdown-menu { background: #e8eef5; } .dropdown-item { color: var(--text-primary); padding: 10px 18px; transition: background var(--transition), color var(--transition); } .dropdown-item:hover { background: #1f3d59; color: var(--accent-green); } body.light-mode .dropdown-item:hover { background: #d0dcea; color: #0a4a7a; } body.light-mode .btn-outline-light { color: #0a1628 !important; border-color: #0a1628 !important; } body.light-mode .btn-outline-light:hover { background: #0a1628 !important; color: #fff !important; } /* Toggle Switch */ .switch { position: relative; display: inline-block; width: 60px; height: 30px; } .switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background: #1c2c3f; border-radius: 30px; display: flex; align-items: center; justify-content: space-between; padding: 0 8px; transition: background 0.3s; } .slider:before { content: ""; position: absolute; height: 24px; width: 24px; left: 3px; bottom: 3px; background: white; border-radius: 50%; transition: transform 0.3s, background 0.3s; } input:checked + .slider:before { transform: translateX(30px); } .icon { font-size: 14px; } body.light-mode .slider { background: #c5d4e8; } @keyframes fadeDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } /* ============================================= HERO SECTION ============================================= */ .hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, rgba(10,20,35,0.85) 0%, rgba(10,20,35,0.70) 50%, rgba(10,20,35,0.35) 100%); transition: background var(--transition); } body.light-mode .hero-overlay { background: linear-gradient(90deg, rgba(240,244,248,0.92) 0%, rgba(240,244,248,0.80) 50%, rgba(240,244,248,0.40) 100%); } .hero-slide { min-height: 100vh; background-size: cover; background-position: center; position: relative; /*display: flex;*/ align-items: flex-start; padding-top: 120px; padding-left: 0px; padding-right: 0px; padding-bottom: 120px; } .hero-content { position: relative; z-index: 5; } .hero-text { padding-left: 50px; } /* Hero text entrance animations */ .hero-text .review { animation: heroFadeUp 0.7s ease 0.2s both; } .hero-text .slide-title { animation: heroFadeUp 0.7s ease 0.4s both; } .hero-text .slide-desc { animation: heroFadeUp 0.7s ease 0.6s both; } .hero-text .hero-list { animation: heroFadeUp 0.7s ease 0.8s both; } .hero-text .hero-buttons{ animation: heroFadeUp 0.7s ease 1.0s both; } .hero-text .hero-note { animation: heroFadeUp 0.7s ease 1.2s both; } @keyframes heroFadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } .slide-title { font-size: clamp(32px, 4.5vw, 56px); line-height: 1.1; margin-bottom: 20px; font-family: 'Sora', sans-serif; font-weight: 600; color: var(--text-primary); } body.light-mode .slide-title { color: #0a1628; } .slide-desc { color: var(--text-muted); max-width: 700px; font-size: clamp(15px, 1.5vw, 18px); } .review { color: var(--text-muted); display: block; margin-bottom: 25px; font-size: 14px; } .hero-note { display: block; margin-top: 14px; color: var(--text-dim); font-size: 13px; } .hero-list { list-style: none; padding: 0; margin-top: 20px; } .hero-list li { margin-bottom: 14px; font-size: clamp(14px, 1.2vw, 16px); color: var(--text-muted); display: flex; align-items: center; } .hero-list i { color: var(--accent-green); font-size: 18px; margin-right: 12px; flex-shrink: 0; } .hero-buttons { margin-top: 25px; } .hero-buttons .btn { margin-right: 10px; margin-bottom: 10px; transition: transform 0.2s, box-shadow 0.2s; } .hero-buttons .btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.25); } .btn-buy { background: var(--accent-green); color: #0a1628; border: none; font-weight: 600; padding: 10px 30px; border-radius: 10px; box-shadow: 0 8px 20px rgba(40, 167, 69, 0.3); transition: all 0.3s ease; } .btn-buy:hover { background: linear-gradient(135deg, #218838, #1ba87e); color: #fff; transform: translateY(-3px); box-shadow: 0 12px 25px rgba(40, 167, 69, 0.4); } .btn-buy:active { transform: translateY(0); } /* ═══════════════════════════════════════════════ TWO PILLARS SECTION ═══════════════════════════════════════════════ */ .tp2-section { background: var(--tp2-bg); padding: 80px 24px 0; position: relative; overflow: hidden; font-family: 'Inter', sans-serif; } /*── Background particles ──*/ .tp2-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; } .tp2-particle { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); border-radius: 50%; background: #4aaeff; opacity: var(--op); animation: tp2Float 6s ease-in-out var(--d) infinite alternate; } .tp2-particle:nth-child(even) { background: #4ADE80; } @keyframes tp2Float { from { transform: translateY(0) scale(1); opacity: var(--op); } to { transform: translateY(-14px) scale(1.4); opacity: calc(var(--op) * 0.5); } } /* side floating icons*/ .tp2-side-icon { position: absolute; top: var(--top); width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; animation: tp2Float 5s ease-in-out infinite alternate; } .tp2-side-left { left: 12px; background: rgba(74,174,255,0.08); border: 1px solid rgba(74,174,255,0.2); } .tp2-side-right { right: 12px; background: rgba(74,222,128,0.08); border: 1px solid rgba(74,222,128,0.2); } /* ── Inner wrapper ── */ .tp2-inner { max-width: 1280px; margin: 0 auto; position: relative; z-index: 2; } /* ── Header ──*/ .tp2-header { text-align: center; margin-bottom: 56px; } .tp2-title { font-family: 'Sora', sans-serif; font-size: clamp(28px, 4vw, 52px); font-weight: 800; color: var(--tp2-text); line-height: 1.1; margin: 0 0 18px; letter-spacing: -0.02em; } .tp2-title-green { color: #4ADE80; } .tp2-subtitle { font-size: clamp(14px, 1.4vw, 18px); color: var(--tp2-subtext); line-height: 1.65; margin: 0; } /*── Stage layout: card | shield | card ── */ .tp2-stage { display: grid; grid-template-columns: 1fr 340px 1fr; gap: 0; align-items: center; min-height: 520px; } /* ── CARDS ── */ .tp2-card { border-radius: 20px; padding: 32px 28px 28px; position: relative; z-index: 5; transition: transform 0.35s cubic-bezier(0.34,1.2,0.64,1), box-shadow 0.35s ease; } .tp2-card--blue { /*background: linear-gradient(135deg, rgba(5,18,35,0.95) 0%, rgba(8,22,42,0.98) 100%);*/ background: var(--tp2-card-blue); border: 1px solid rgba(74,174,255,0.35); box-shadow: 0 0 40px rgba(74,174,255,0.08), inset 0 1px 0 rgba(74,174,255,0.15); margin-right: -24px; } .tp2-card--green { /*background: linear-gradient(135deg, rgba(5,22,14,0.95) 0%, rgba(8,28,18,0.98) 100%);*/ background: var(--tp2-card-green); border: 1px solid rgba(74,222,128,0.35); box-shadow: 0 0 40px rgba(74,222,128,0.08), inset 0 1px 0 rgba(74,222,128,0.15); margin-left: -24px; } .tp2-card--blue:hover { transform: translateY(-8px) scale(1.01); box-shadow: 0 20px 60px rgba(74,174,255,0.18), inset 0 1px 0 rgba(74,174,255,0.2); } .tp2-card--green:hover { transform: translateY(-8px) scale(1.01); box-shadow: 0 20px 60px rgba(74,222,128,0.18), inset 0 1px 0 rgba(74,222,128,0.2); } .tp2-card--blue::after, .tp2-card--green::after { content: ""; position: absolute; inset: 0; border-radius: 20px; pointer-events: none; } .tp2-card--blue::after { box-shadow: 0 0 60px rgba(74,174,255,0.12); } .tp2-card--green::after { box-shadow: 0 0 60px rgba(74,222,128,0.12); } /* card inner glow strip at top*/ .tp2-card-glow { position: absolute; top: 0; left: 20px; right: 20px; height: 2px; border-radius: 2px; } .tp2-card-glow--blue { background: linear-gradient(90deg, transparent, #4aaeff, transparent); box-shadow: 0 0 12px #4aaeff; } .tp2-card-glow--green { background: linear-gradient(90deg, transparent, #4ADE80, transparent); box-shadow: 0 0 12px #4ADE80; } /* Logo row */ .tp2-logo-row { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; } .tp2-logo-icon { width: 48px; height: 48px; border-radius: 12px; background: rgba(253,176,34,0.10); border: 1px solid rgba(253,176,34,0.25); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .tp2-logo-icon--green { background: rgba(253,176,34,0.10); border-color: rgba(253,176,34,0.25); } .tp2-brand-name { display: block; font-family: 'Sora', sans-serif; font-size: 20px; font-weight: 800; color: var(--tp2-text); letter-spacing: 0.04em; line-height: 1; } .tp2-brand-name--white { color: var(--tp2-text); } .tp2-brand-net { color: var(--tp2-text); } .tp2-brand-tagline { display: block; font-size: 9px; letter-spacing: 0.12em; color: rgba(255,255,255,0.35); margin-top: 4px; text-transform: uppercase; } /*Slogan */ .tp2-card-slogan { font-family: 'Sora', sans-serif; font-size: 15px; font-weight: 600; margin: 16px 0 20px; letter-spacing: 0.02em; } .tp2-card-slogan--blue { color: #4aaeff; } .tp2-card-slogan--green { color: #4ADE80; } /*Feature list */ .tp2-feat-list { list-style: none; padding: 0; margin: 0 0 28px; display: flex; flex-direction: column; gap: 14px; } .tp2-feat-list li { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--tp2-subtext); /*color: rgba(255,255,255,0.82);*/ line-height: 1.4; } .tp2-feat-icon { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .tp2-feat-icon--blue { background: rgba(74,174,255,0.10); border: 1px solid rgba(74,174,255,0.22); } .tp2-feat-icon--green { background: rgba(74,222,128,0.10); border: 1px solid rgba(74,222,128,0.22); } /* CTA button*/ .tp2-card-btn { display: flex; align-items: center; justify-content: center; width: 100%; padding: 13px 20px; border-radius: 10px; font-family: 'Sora', sans-serif; font-size: 15px; font-weight: 700; text-decoration: none; letter-spacing: 0.02em; transition: background 0.25s, box-shadow 0.25s, transform 0.2s; } .tp2-card-btn--blue { background: transparent; border: 2px solid #4aaeff; color: #4aaeff; } .tp2-card-btn--blue:hover { background: rgba(74,174,255,0.12); box-shadow: 0 0 20px rgba(74,174,255,0.3); transform: translateY(-2px); color: #4aaeff; text-decoration: none; } .tp2-card-btn--green { background: transparent; border: 2px solid #4ADE80; color: #4ADE80; } .tp2-card-btn--green:hover { background: rgba(74,222,128,0.12); box-shadow: 0 0 20px rgba(74,222,128,0.3); transform: translateY(-2px); color: #4ADE80; text-decoration: none; } /*── Centre shield scene ── */ .tp2-centre { display: flex; align-items: center; justify-content: center; position: relative; z-index: 10; height: 100%; min-height: 520px; } .tp2-shield-scene { position: relative; width: 280px; height: 340px; display: flex; align-items: center; justify-content: center; } /* Pulse rings*/ .tp2-pulse { position: absolute; border-radius: 50%; border: 1px solid; top: 50%; left: 50%; transform: translate(-50%, -50%); } .tp2-pulse-1 { width: 200px; height: 200px; border-color: rgba(74,174,255,0.3); animation: tp2Pulse 3s ease-in-out infinite; } .tp2-pulse-2 { width: 260px; height: 260px; border-color: rgba(74,222,128,0.2); animation: tp2Pulse 3s ease-in-out 0.6s infinite; } .tp2-pulse-3 { width: 320px; height: 320px; border-color: rgba(74,174,255,0.1); animation: tp2Pulse 3s ease-in-out 1.2s infinite; } @keyframes tp2Pulse { 0%,100% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 0.4; transform: translate(-50%, -50%) scale(1.06); } } /*horizontal energy beams */ ground glow .tp2-ground-glow { position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); width: 240px; height: 40px; background: radial-gradient(ellipse, rgba(74,222,128,0.35), rgba(74,174,255,0.2) 50%, transparent 80%); border-radius: 50%; filter: blur(10px); animation: tp2GroundPulse 3s ease-in-out infinite; } @keyframes tp2GroundPulse { 0%,100% { opacity: 0.8; transform: translateX(-50%) scaleX(1); } 50% { opacity: 0.4; transform: translateX(-50%) scaleX(0.85); } } Shield SVG .tp2-shield-svg { width: 230px; height: auto; position: relative; z-index: 5; filter: drop-shadow(0 0 20px rgba(74,174,255,0.4)) drop-shadow(0 0 40px rgba(74,222,128,0.3)) drop-shadow(0 0 80px rgba(74,174,255,0.15)); animation: tp2ShieldFloat 4s ease-in-out infinite; } @keyframes tp2ShieldFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .tp2-shield-scene::before { content: ""; position: absolute; width: 260px; height: 260px; background: radial-gradient(circle, rgba(74,174,255,0.25), transparent 70%); filter: blur(40px); z-index: 0; animation: tp2GlowPulse 3s ease-in-out infinite; } @keyframes tp2GlowPulse { 0%,100% { opacity: 0.6; } 50% { opacity: 1; } } /* ── Bottom stats bar ── */ .tp2-stats { display: flex; align-items: center; background: rgba(255,255,255,0.04); border-top: 1px solid rgba(255,255,255,0.07); /*margin-top: 60px;*/ padding: 28px 24px; gap: 0; flex-wrap: wrap; } .tp2-stat { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 200px; padding: 10px 20px; } .tp2-stat-icon { width: 48px; height: 48px; border-radius: 12px; background: rgba(74,174,255,0.08); border: 1px solid rgba(74,174,255,0.18); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .tp2-stat:nth-child(3) .tp2-stat-icon, .tp2-stat:nth-child(5) .tp2-stat-icon { background: rgba(74,222,128,0.08); border-color: rgba(74,222,128,0.18); } .tp2-stat-text strong { display: block; font-family: 'Sora', sans-serif; font-size: 15px; font-weight: 700; color: var(--tp2-text); margin-bottom: 4px; } .tp2-stat-text span { display: block; font-size: 13px; color: var(--tp2-subtext); /*color: rgba(255,255,255,0.45);*/ } .tp2-stat-divider { width: 1px; height: 48px; background: rgba(255,255,255,0.08); flex-shrink: 0; } /* ── Responsive ── */ @media (max-width: 1100px) { .tp2-stage { grid-template-columns: 1fr 280px 1fr; } .tp2-shield-svg { width: 190px; } } @media (max-width: 900px) { .tp2-stage { grid-template-columns: 1fr; gap: 24px; min-height: auto; } .tp2-centre { min-height: 300px; order: -1; shield goes on top } .tp2-shield-scene { width: 220px; height: 280px; } .tp2-shield-svg { width: 160px; } .tp2-card--blue { margin-right: 0; } .tp2-card--green { margin-left: 0; } .tp2-side-icon { display: none; } .tp2-beam { display: none; } } @media (max-width: 640px) { .tp2-section { padding: 60px 16px 0; } .tp2-title { font-size: clamp(24px, 7vw, 36px); } .tp2-stats { flex-direction: column; gap: 0; padding: 20px 16px; } .tp2-stat { width: 100%; padding: 14px 10px; min-width: unset; } .tp2-stat-divider { width: 100%; height: 1px; } } /* ═══ CONNECTING ENERGY BEAMS (ENHANCED) ═══ */ .tp2-beam { position: absolute; top: 50%; transform: translateY(-50%); height: 4px; width: 140px; border-radius: 3px; z-index: 1; /*opacity: 0.9;*/ } .tp2-beam::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 90deg, transparent, white, transparent ); opacity: 0.6; animation: tp2EnergyFlow 1.6s linear infinite; } @keyframes tp2EnergyFlow { from { transform: translateX(-100%); } to { transform: translateX(100%); } } .tp2-beam--blue { left: 0px; /*background: linear-gradient(to left, #4aaeff, transparent); box-shadow: 0 0 10px #4aaeff, 0 0 25px #4aaeff;*/ animation: tp2BeamBlue 2.2s ease-in-out infinite; background: linear-gradient(to left, #4aaeff, rgba(74,174,255,0.1), transparent); box-shadow: 0 0 15px #4aaeff, 0 0 40px #4aaeff; } .tp2-beam--green { right: 0px; /*background: linear-gradient(to right, #4ADE80, transparent); box-shadow: 0 0 10px #4ADE80, 0 0 25px #4ADE80;*/ animation: tp2BeamGreen 2.2s ease-in-out infinite; background: linear-gradient(to right, #4ADE80, rgba(74,222,128,0.1), transparent); box-shadow: 0 0 15px #4ADE80, 0 0 40px #4ADE80; } @keyframes tp2BeamBlue { 0%,100% { opacity: 0.4; transform: translateY(-50%) scaleX(0.9); } 50% { opacity: 1; transform: translateY(-50%) scaleX(1.1); } } @keyframes tp2BeamGreen { 0%,100% { opacity: 0.4; transform: translateY(-50%) scaleX(0.9); } 50% { opacity: 1; transform: translateY(-50%) scaleX(1.1); } } /*═══ LIGHT MODE (PROPER) ═══ */ body.light-mode .tp2-section { background: #f4f7fb; } body.light-mode .tp2-title { color: #0b1220; } body.light-mode .tp2-subtitle { color: #5b6b7c; } body.light-mode .tp2-card--blue { background: #ffffff; border: 1px solid rgba(74,174,255,0.25); box-shadow: 0 10px 30px rgba(0,0,0,0.05); } body.light-mode .tp2-card--green { background: #ffffff; border: 1px solid rgba(74,222,128,0.25); box-shadow: 0 10px 30px rgba(0,0,0,0.05); } body.light-mode .tp2-feat-list li { color: #2a3441; } body.light-mode .tp2-stat-text strong { color: #0b1220; } body.light-mode .tp2-stat-text span { color: #5b6b7c; } body.light-mode .tp2-stats { background: #ffffff; border-top: 1px solid rgba(0,0,0,0.05); } /* CTA row */ .tp2-cta-row { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 32px 0 8px; } .tp2-cta-btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 36px; background: linear-gradient(135deg, #4aaeff 0%, #0a7fff 50%, #0057cc 100%); color: #fff; font-size: 1rem; font-weight: 600; border-radius: 50px; text-decoration: none; letter-spacing: 0.01em; box-shadow: 0 0 28px rgba(74,174,255,0.4), 0 0 8px rgba(74,174,255,0.2); transition: transform 0.2s, box-shadow 0.2s; position: relative; overflow: hidden; } .tp2-cta-btn::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, transparent 60%); border-radius: inherit; } .tp2-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 0 40px rgba(74,174,255,0.6), 0 0 14px rgba(74,174,255,0.3); } /* Animated green live dot */ .tp2-cta-pulse { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #4ADE80; box-shadow: 0 0 8px #4ADE80; animation: tp2-pulse-dot 1.6s infinite; flex-shrink: 0; } @keyframes tp2-pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.6; transform: scale(1.5); } } /* Subtle reassurance line */ .tp2-cta-note { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; color: #4ADE80; margin: 0; } /* ═══════════════════════════════════════ REAL SECURITY DOME (MATCH IMAGE) ═══════════════════════════════════════ */ .tp2-dome-wrap { position: absolute; top: -180px; left: 0; width: 100%; height: 460px; pointer-events: none; z-index: 1; } .tp2-dome { position: relative; width: 100%; height: 100%; } /* BOTH HALVES BASE */ .tp2-dome-half { position: absolute; top: 0; width: 60%; height: 100%; filter: blur(50px); } /* LEFT (BLUE SIDE) */ .tp2-dome-left { left: -10%; background: radial-gradient( ellipse at 70% 100%, rgba(74,174,255,0.55) 0%, rgba(74,174,255,0.35) 25%, rgba(74,174,255,0.15) 50%, transparent 70% ); } /* RIGHT (GREEN SIDE) */ .tp2-dome-right { right: -10%; background: radial-gradient( ellipse at 30% 100%, rgba(74,222,128,0.55) 0%, rgba(74,222,128,0.35) 25%, rgba(74,222,128,0.15) 50%, transparent 70% ); } .tp2-dome::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,0.08) 1px, transparent 1px); background-size: 16px 16px; mask-image: radial-gradient( ellipse at center, black 40%, transparent 80% ); opacity: 0.35; } .tp2-dome::after { content: ""; position: absolute; top: 120px; left: 8%; width: 84%; height: 240px; border-top: 1px solid rgba(255,255,255,0.12); border-radius: 50%; box-shadow: 0 0 20px rgba(74,174,255,0.2), 0 0 40px rgba(74,222,128,0.2); opacity: 0.6; } .tp2-dome-center-glow { position: absolute; top: 120px; left: 50%; transform: translateX(-50%); width: 320px; height: 200px; background: radial-gradient( ellipse, rgba(255,255,255,0.15), transparent 70% ); filter: blur(40px); z-index: 2; } @keyframes tp2CoreGlow { 0%,100% { opacity: 0.6; } 50% { opacity: 1; } } .tp2-ground-rings { position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); } .tp2-ground-rings span { display: block; width: 220px; height: 40px; border-radius: 50%; border: 1px solid rgba(74,174,255,0.2); position: absolute; left: 50%; transform: translateX(-50%); animation: tp2RingPulse 3s infinite; } .tp2-ground-rings span:nth-child(2) { width: 260px; opacity: 0.6; } .tp2-ground-rings span:nth-child(3) { width: 300px; opacity: 0.3; } @keyframes tp2RingPulse { 0% { transform: translateX(-50%) scale(1); opacity: 0.6; } 50% { transform: translateX(-50%) scale(1.1); opacity: 1; } 100% { transform: translateX(-50%) scale(1); opacity: 0.6; } } /* ═══════════════════════════════════════ CARD LEVEL DOME (FIXED POSITION) ═══════════════════════════════════════ */ .tp2-card { position: relative; overflow: visible; /* IMPORTANT */ } /* BASE DOME */ .tp2-card-dome { position: absolute; top: -160px; left: 50%; transform: translateX(-50%); width: 160%; height: 320px; pointer-events: none; z-index: 1; filter: blur(50px); } /* BLUE SIDE */ .tp2-card-dome--blue { background: radial-gradient( ellipse at 50% 100%, rgba(74,174,255,0.45) 0%, rgba(74,174,255,0.25) 35%, rgba(74,174,255,0.10) 60%, transparent 80% ); } /* GREEN SIDE */ .tp2-card-dome--green { background: radial-gradient( ellipse at 50% 100%, rgba(74,222,128,0.45) 0%, rgba(74,222,128,0.25) 35%, rgba(74,222,128,0.10) 60%, transparent 80% ); } .tp2-card-dome::after { content: ""; position: absolute; bottom: 40px; left: 10%; width: 80%; height: 180px; border-top: 1px solid rgba(255,255,255,0.15); border-radius: 50%; opacity: 0.6; } .tp2-card-dome::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,0.07) 1px, transparent 1px); background-size: 14px 14px; mask-image: radial-gradient( ellipse at center, black 40%, transparent 75% ); opacity: 0.3; } .tp2-global-dome { position: absolute; top: 120px; /* 🔥 THIS is key */ left: 50%; transform: translateX(-50%); width: 1200px; height: 420px; border-radius: 50%; z-index: 1; /* behind content */ background: radial-gradient( ellipse at center, rgba(74,174,255,0.35) 0%, rgba(74,222,128,0.25) 40%, rgba(74,174,255,0.15) 65%, transparent 80% ); filter: blur(80px); opacity: 0.9; pointer-events: none; animation: tp2DomeFloat 8s ease-in-out infinite alternate; } @keyframes tp2DomeFloat { 0% { transform: translateX(-50%) scale(1); opacity: 0.85; } 100% { transform: translateX(-50%) scale(1.05); opacity: 1; } } @media (max-width: 900px) { .tp2-global-dome { width: 800px; height: 300px; top: 100px; } } @media (max-width: 600px) { .tp2-global-dome { width: 500px; height: 200px; top: 80px; } } /* ═══════════════════════════════════════════════════ ROOT & SECTION SHELL ═══════════════════════════════════════════════════ */ .tp2 { position: relative; background: #010913; padding: 80px 0 0; overflow: hidden; font-family: 'Inter', sans-serif; color: var(--tp2-text); /*--mx: 50%; --my: 50%;*/ } .tp2::after { content: ""; position: absolute; inset: 0; background: radial-gradient( 500px circle at var(--mx) var(--my), rgba(74,174,255,0.12), transparent 60% ); pointer-events: none; z-index: 1; transition: background 0.1s; } /* ═══════════════════════════════════════════════════ BACKGROUND LAYER ═══════════════════════════════════════════════════ */ .tp2-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; } /* Circuit SVG left/right strips */ .tp2-circuit { position: absolute; top: 10%; bottom: 10%; width: 130px; } .tp2-circuit--left { left: 0; } .tp2-circuit--right { right: 0; transform: scaleX(-1); } .tp2-circuit svg { width: 100%; height: 100%; } /* Ambient blob glows */ .tp2-ambient { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; } .tp2-ambient--blue { width: 400px; height: 400px; left: -100px; top: 10%; background: radial-gradient(circle, rgba(74,174,255,0.12), transparent 65%); } .tp2-ambient--green { width: 400px; height: 400px; right: -100px; top: 10%; background: radial-gradient(circle, rgba(74,222,128,0.12), transparent 65%); } /* Floating particles */ .tp2-dot { position: absolute; left: var(--l); top: var(--t); width: var(--s); height: var(--s); border-radius: 50%; background: #4aaeff; opacity: 0.5; animation: tp2dotFloat 5s ease-in-out var(--d) infinite alternate; } .tp2-dot--g { background: #4ADE80; } @keyframes tp2dotFloat { from { transform: translateY(0); opacity: 0.5; } to { transform: translateY(-16px); opacity: 0.15; } } /* ═══════════════════════════════════════════════════ INNER WRAPPER ═══════════════════════════════════════════════════ */ .tp2-inner { max-width: 1380px; margin: 0 auto; padding: 0 20px; position: relative; z-index: 2; } /* ═══════════════════════════════════════════════════ HEADER ═══════════════════════════════════════════════════ */ .tp2-header { text-align: center; margin-bottom: 52px; } .tp2-h2 { font-family: 'Sora', sans-serif; font-size: clamp(26px, 3.8vw, 52px); font-weight: 800; color: #ffffff; line-height: 1.08; margin: 0 0 16px; letter-spacing: -0.025em; } .tp2-h2-accent { color: #4ADE80; } .tp2-sub { font-size: clamp(14px, 1.35vw, 18px); color: rgba(255,255,255,0.52); line-height: 1.6; margin: 0; } .tp2-br { display: block; } /* ═══════════════════════════════════════════════════ STAGE — 5-column grid: side | card | shield | card | side ═══════════════════════════════════════════════════ */ .tp2-stage { display: grid; grid-template-columns: 56px 1fr 380px 1fr 56px; gap: 0 18px; align-items: center; min-height: 540px; } /* ═══════════════════════════════════════════════════ SIDE ICON COLUMNS ═══════════════════════════════════════════════════ */ .tp2-side { display: flex; flex-direction: column; gap: 18px; align-items: center; justify-content: center; height: 100%; } .tp2-side-btn { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform 0.25s ease, box-shadow 0.25s ease; cursor: default; /* supports children too */ overflow: hidden; } .tp2-side-btn--blue { background: rgba(74,174,255,0.07); border: 1px solid rgba(74,174,255,0.22); } .tp2-side-btn--green { background: rgba(74,222,128,0.07); border: 1px solid rgba(74,222,128,0.22); } .tp2-side-btn--blue:hover { transform: scale(1.12); box-shadow: 0 0 16px rgba(74,174,255,0.4); border-color: rgba(74,174,255,0.6); } .tp2-side-btn--green:hover { transform: scale(1.12); box-shadow: 0 0 16px rgba(74,222,128,0.4); border-color: rgba(74,222,128,0.6); } /* If using an inside side icon */ .tp2-side-btn img { width: 24px; height: 24px; object-fit: contain; } /* ═══════════════════════════════════════════════════ CARDS ═══════════════════════════════════════════════════ */ .tp2-card { position: relative; border-radius: 20px; padding: 30px 26px 26px; z-index: 5; transition: transform 0.38s cubic-bezier(0.34,1.25,0.64,1), box-shadow 0.38s ease, border-color 0.38s ease; } .tp2-card--blue { background: linear-gradient(145deg, #050f1f 0%, #07152a 60%, #040e1a 100%); border: 1px solid rgba(74,174,255,0.28); box-shadow: 0 0 0 1px rgba(74,174,255,0.06), 0 0 40px 0 rgba(74,174,255,0.06), inset 0 1px 0 rgba(74,174,255,0.12); } .tp2-card--green { background: linear-gradient(145deg, #041510 0%, #072018 60%, #041510 100%); border: 1px solid rgba(74,222,128,0.28); box-shadow: 0 0 0 1px rgba(74,222,128,0.06), 0 0 40px 0 rgba(74,222,128,0.06), inset 0 1px 0 rgba(74,222,128,0.12); } /* Hover */ .tp2-card--blue:hover { transform: translateY(-10px) scale(1.015); border-color: rgba(74,174,255,0.6); box-shadow: 0 0 0 1px rgba(74,174,255,0.12), 0 24px 60px rgba(74,174,255,0.18), 0 0 60px rgba(74,174,255,0.10), inset 0 1px 0 rgba(74,174,255,0.25); } .tp2-card--green:hover { transform: translateY(-10px) scale(1.015); border-color: rgba(74,222,128,0.6); box-shadow: 0 0 0 1px rgba(74,222,128,0.12), 0 24px 60px rgba(74,222,128,0.18), 0 0 60px rgba(74,222,128,0.10), inset 0 1px 0 rgba(74,222,128,0.25); } /* Top glow stripe */ .tp2-card-topglow { position: absolute; top: 0; left: 16px; right: 16px; height: 2px; border-radius: 0 0 2px 2px; } .tp2-card-topglow--blue { background: linear-gradient(90deg, transparent 0%, #00cfff 40%, #4aaeff 60%, transparent 100%); box-shadow: 0 0 14px 2px rgba(74,174,255,0.6); } .tp2-card-topglow--green { background: linear-gradient(90deg, transparent 0%, #00ff88 40%, #4ADE80 60%, transparent 100%); box-shadow: 0 0 14px 2px rgba(74,222,128,0.6); } /* ── Card head (logo row) ── */ .tp2-card-head { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; } /* Logo wrap — supports SVG or */ .tp2-logo-wrap { width: 50px; height: 50px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; /* supports custom image logos */ } .tp2-logo-wrap--orange { background: rgba(253,176,34,0.10); border: 1px solid rgba(253,176,34,0.28); } .tp2-logo-wrap--gold { background: rgba(253,176,34,0.10); border: 1px solid rgba(253,176,34,0.28); } /* If an is used as logo */ .tp2-logo-img { width: 100%; height: 100%; object-fit: contain; padding: 6px; } .tp2-brand { display: flex; flex-direction: column; } .tp2-brand-name { font-family: 'Sora', sans-serif; font-size: 20px; font-weight: 800; color: var(--tp2-text); letter-spacing: 0.05em; line-height: 1; } .tp2-brand-suffix { color: var(--tp2-text); } .tp2-brand-sub { font-size: 9px; letter-spacing: 0.12em; color: rgba(255,255,255,0.32); margin-top: 5px; text-transform: uppercase; } /* ── Slogan ── */ .tp2-slogan { font-family: 'Sora', sans-serif; font-size: 15px; font-weight: 600; margin: 16px 0 20px; letter-spacing: 0.02em; } .tp2-slogan--blue { color: #4aaeff; } .tp2-slogan--green { color: #4ADE80; } /* ── Feature list ── */ .tp2-list { list-style: none; padding: 0; margin: 0 0 26px; display: flex; flex-direction: column; gap: 13px; } .tp2-list li { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--tp2-text); line-height: 1.35; } .tp2-li-icon { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .tp2-li-icon--blue { background: rgba(74,174,255,0.10); border: 1px solid rgba(74,174,255,0.22); } .tp2-li-icon--green { background: rgba(74,222,128,0.10); border: 1px solid rgba(74,222,128,0.22); } /* ── CTA button ── */ .tp2-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 13px 20px; border-radius: 10px; font-family: 'Sora', sans-serif; font-size: 15px; font-weight: 700; letter-spacing: 0.025em; text-decoration: none; transition: background 0.25s, box-shadow 0.25s, transform 0.2s, border-color 0.25s; } .tp2-btn--blue { background: transparent; border: 2px solid rgba(74,174,255,0.7); color: #4aaeff; } .tp2-btn--blue:hover { background: rgba(74,174,255,0.10); border-color: #4aaeff; box-shadow: 0 0 24px rgba(74,174,255,0.35); transform: translateY(-2px); color: #4aaeff; text-decoration: none; } .tp2-btn--green { background: transparent; border: 2px solid rgba(74,222,128,0.7); color: #4ADE80; } .tp2-btn--green:hover { background: rgba(74,222,128,0.10); border-color: #4ADE80; box-shadow: 0 0 24px rgba(74,222,128,0.35); transform: translateY(-2px); color: #4ADE80; text-decoration: none; } .tp2-arrow { display: inline-block; transition: transform 0.2s; } .tp2-btn:hover .tp2-arrow { transform: translateX(4px); } /* ═══════════════════════════════════════════════════ CENTRE SHIELD COLUMN ═══════════════════════════════════════════════════ */ .tp2-shield-col { position: relative; display: flex; align-items: center; justify-content: center; height: 100%; min-height: 540px; z-index: 8; } .tp2-shield-scene { position: relative; display: flex; align-items: center; justify-content: center; width: 360px; height: 460px; } /* Ripple rings */ .tp2-ring { position: absolute; border-radius: 50%; border: 1px solid; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } .tp2-ring-1 { width: 220px; height: 220px; border-color: rgba(74,174,255,0.25); animation: tp2ring 3.5s ease-in-out infinite; } .tp2-ring-2 { width: 290px; height: 290px; border-color: rgba(74,222,128,0.18); animation: tp2ring 3.5s ease-in-out 0.7s infinite; } .tp2-ring-3 { width: 360px; height: 360px; border-color: rgba(74,174,255,0.08); animation: tp2ring 3.5s ease-in-out 1.4s infinite; } @keyframes tp2ring { 0%,100% { opacity: 1; transform: translate(-50%,-50%) scale(1); } 50% { opacity: 0.35; transform: translate(-50%,-50%) scale(1.05); } } /* Laser beams shooting left + right from shield midpoint */ .tp2-laser { position: absolute; top: 50%; height: 2px; width: 120px; transform: translateY(-50%); border-radius: 2px; filter: blur(1.5px); animation: tp2laser 2.5s ease-in-out infinite alternate; } .tp2-laser--left { right: 52%; background: linear-gradient(to left, #00d4ff, transparent); box-shadow: 0 0 8px #00d4ff; } .tp2-laser--right { left: 52%; background: linear-gradient(to right, #00ff88, transparent); box-shadow: 0 0 8px #00ff88; } @keyframes tp2laser { from { opacity: 0.5; } to { opacity: 1; } } /* Shield SVG */ .tp2-shield-svg { width: 280px; height: auto; position: relative; z-index: 5; filter: drop-shadow(0 0 18px rgba(74,174,255,0.5)) drop-shadow(0 0 35px rgba(74,222,128,0.3)) drop-shadow(0 0 70px rgba(74,174,255,0.15)); animation: tp2shieldFloat 4.5s ease-in-out infinite; } @keyframes tp2shieldFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } /* Custom icon slot inside shield: If you use an SVG element, set x/y/width/height to position it. If you use an HTML overlay, position it absolutely inside .tp2-shield-scene with z-index:6 and size/position it over the shield centre. Example HTML overlay approach: */ .tp2-shield-custom-icon { position: absolute; z-index: 6; /* Centre it over the shield emblem area */ top: 50%; left: 50%; transform: translate(-50%, -30%); width: 110px; height: 110px; object-fit: contain; /* Optional: add a glow filter via CSS */ filter: drop-shadow(0 0 12px rgba(253,176,34,0.6)); } /* Ground platform rings below shield */ .tp2-ground { position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); width: 280px; height: 40px; pointer-events: none; } .tp2-ground-ring { position: absolute; border-radius: 50%; left: 50%; top: 0; transform: translateX(-50%); border: 1px solid; } .tp2-ground-ring-1 { width: 240px; height: 28px; border-color: rgba(74,222,128,0.35); background: radial-gradient(ellipse, rgba(74,222,128,0.10), transparent 70%); animation: tp2glow 3s ease-in-out infinite; } .tp2-ground-ring-2 { width: 180px; height: 20px; top: 5px; border-color: rgba(74,174,255,0.25); background: radial-gradient(ellipse, rgba(74,174,255,0.08), transparent 70%); animation: tp2glow 3s ease-in-out 0.5s infinite; } .tp2-ground-ring-3 { width: 120px; height: 14px; top: 10px; border-color: rgba(74,222,128,0.20); background: radial-gradient(ellipse, rgba(74,222,128,0.06), transparent 70%); animation: tp2glow 3s ease-in-out 1s infinite; } @keyframes tp2glow { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } } /* ═══════════════════════════════════════════════════ BOTTOM STATS BAR ═══════════════════════════════════════════════════ */ .tp2-stats { display: flex; align-items: center; background: rgba(255,255,255,0.03); border-top: 1px solid rgba(255,255,255,0.06); /*margin-top: 56px;*/ padding: 26px 20px; flex-wrap: wrap; gap: 0; } .tp2-stat { display: flex; align-items: center; gap: 16px; flex: 1; min-width: 190px; padding: 10px 24px; } .tp2-stat-icon { width: 50px; height: 50px; border-radius: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; /* supports inside */ overflow: hidden; } .tp2-stat-icon--blue { background: rgba(74,174,255,0.08); border: 1px solid rgba(74,174,255,0.2); } .tp2-stat-icon--green { background: rgba(74,222,128,0.08); border: 1px solid rgba(74,222,128,0.2); } /* If using an in stat icon slot */ .tp2-stat-icon img { width: 28px; height: 28px; object-fit: contain; } .tp2-stat-title { font-family: 'Sora', sans-serif; font-size: 15px; font-weight: 700; color: var(--tp2-text); margin: 0 0 4px; } .tp2-stat-desc { font-size: 13px; color: rgba(255,255,255,0.42); margin: 0; } .tp2-stat-sep { width: 1px; height: 52px; background: rgba(255,255,255,0.07); flex-shrink: 0; } /* ═══════════════════════════════════════ TOP PROTECTIVE CLOUD / DOME (FIXED) ═══════════════════════════════════════ */ .tp2-cloud { position: absolute; top: -160px; left: 0; width: 100%; height: 420px; pointer-events: none; z-index: 1; } .tp2-cloud::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px); background-size: 14px 14px; mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%); opacity: 0.3; } /* LEFT BLUE ARC */ .tp2-cloud-left { position: absolute; left: -15%; top: 0; width: 70%; height: 100%; background: radial-gradient( ellipse at 70% 100%, rgba(74,174,255,0.45) 0%, rgba(74,174,255,0.25) 30%, rgba(74,174,255,0.10) 55%, transparent 75% ); filter: blur(60px); opacity: 0.8; } /* RIGHT GREEN ARC */ .tp2-cloud-right { position: absolute; right: -15%; top: 0; width: 70%; height: 100%; background: radial-gradient( ellipse at 30% 100%, rgba(74,222,128,0.45) 0%, rgba(74,222,128,0.25) 30%, rgba(74,222,128,0.10) 55%, transparent 75% ); filter: blur(60px); opacity: 0.8; } .tp2-cloud::after { content: ""; position: absolute; top: 120px; left: 10%; width: 80%; height: 220px; border-top: 1px solid rgba(255,255,255,0.08); border-radius: 50%; opacity: 0.4; } .tp2-cloud-left, .tp2-cloud-right { animation: tp2CloudMove 6s ease-in-out infinite alternate; } @keyframes tp2CloudMove { 0% { transform: translateY(0) scale(1); } 100% { transform: translateY(10px) scale(1.05); } } @media (max-width: 900px) { .tp2-cloud { display: none; /* prevents layout break */ } } /* ═══════════════════════════════════════════════════ RESPONSIVE ═══════════════════════════════════════════════════ */ /* Tablet — hide side icon columns, adjust shield */ @media (max-width: 1200px) { .tp2-stage { grid-template-columns: 48px 1fr 320px 1fr 48px; gap: 0 14px; } .tp2-shield-svg { width: 240px; } .tp2-shield-scene { width: 300px; height: 400px; } } @media (max-width: 1000px) { .tp2-stage { grid-template-columns: 1fr; gap: 24px; min-height: auto; } .tp2-side { flex-direction: row; justify-content: center; height: auto; } .tp2-side--left { order: 1; } .tp2-card--blue { order: 2; } .tp2-shield-col { order: 3; min-height: 360px; } .tp2-card--green { order: 4; } .tp2-side--right { order: 5; } .tp2-shield-scene { width: 260px; height: 340px; } .tp2-shield-svg { width: 200px; } .tp2-laser { width: 80px; } } @media (max-width: 640px) { .tp2 { padding: 60px 0 0; } .tp2-h2 { font-size: clamp(22px, 7vw, 34px); } .tp2-br { display: none; } .tp2-inner { padding: 0 16px; } .tp2-stats { flex-direction: column; padding: 20px 16px; gap: 0; } .tp2-stat { width: 100%; min-width: unset; padding: 14px 10px; } .tp2-stat-sep { width: 100%; height: 1px; } .tp2-side { display: none; } /* hide side icons on mobile */ .tp2-shield-scene { width: 220px; height: 300px; } .tp2-shield-svg { width: 170px; } .tp2-card { padding: 24px 20px 22px; } } /* Keep dark even in light mode — design is inherently dark */ body.light-mode .tp2 { background: #010913; } /* ============================================= SECTION 3: SAFERNET — 3-in-1 Digital Shield ============================================= */ .safernet-section { background: var(--bg-primary); padding: 100px 24px 80px; position: relative; overflow: hidden; transition: background var(--transition); } /* Background grid */ .safernet-bg-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(74,222,128,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(74,222,128,0.03) 1px, transparent 1px); background-size: 60px 60px; pointer-events: none; z-index: 0; } .safernet-bg-particles { position: absolute; inset: 0; pointer-events: none; z-index: 0; } .safernet-particle { position: absolute; border-radius: 50%; opacity: var(--op, 0.15); animation: snParticleFloat 6s ease-in-out var(--d, 0s) infinite alternate; } @keyframes snParticleFloat { from { transform: translateY(0) scale(1); opacity: var(--op, 0.15); } to { transform: translateY(-18px) scale(1.3); opacity: calc(var(--op, 0.15) * 0.4); } } .safernet-inner { max-width: 1300px; margin: 0 auto; position: relative; z-index: 2; } /* ── SaferNet Header Row ── */ .safernet-header { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; margin-bottom: 70px; } .safernet-header-text { max-width: 600px; } .safernet-logo-row { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; } .safernet-logo-icon { width: 50px; height: 50px; background: linear-gradient(135deg, rgba(253,176,34,0.15), rgba(253,176,34,0.05)); border: 1px solid rgba(253,176,34,0.3); border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .safernet-logo-icon i { color: var(--accent-yellow); font-size: 22px; } .safernet-brand { font-family: 'Sora', sans-serif; font-size: 22px; font-weight: 800; letter-spacing: 0.06em; color: var(--text-primary); transition: color var(--transition); } .safernet-brand-net { color: var(--accent-yellow); } .safernet-brand-tagline { display: block; font-size: 8px; letter-spacing: 0.14em; color: var(--text-dim); text-transform: uppercase; margin-top: 3px; font-weight: 500; } .safernet-title { font-family: 'Sora', sans-serif; font-size: clamp(30px, 4.5vw, 54px); font-weight: 600; line-height: 1.08; color: var(--text-primary); margin-bottom: 22px; transition: color var(--transition); } .safernet-title-yellow { color: var(--accent-yellow); } .safernet-desc { font-size: clamp(14px, 1.4vw, 17px); color: var(--text-muted); line-height: 1.7; max-width: 560px; transition: color var(--transition); } /* ── SaferNet Shield Scene (right side) ── */ .safernet-shield-wrapper { display: flex; align-items: center; justify-content: center; position: relative; min-height: 440px; } .safernet-shield-scene { position: relative; width: 340px; height: 380px; display: flex; align-items: center; justify-content: center; } /* Hex grid background behind shield */ .safernet-hex-bg { position: absolute; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(74,222,128,0.06) 0%, transparent 70%); z-index: 0; } /* Pulsing rings */ .safernet-ring { position: absolute; border-radius: 50%; border: 1px solid; top: 50%; left: 50%; transform: translate(-50%, -50%); animation: snRingPulse 3.5s ease-in-out infinite; } .safernet-ring-1 { width: 200px; height: 200px; border-color: rgba(74,222,128,0.25); } .safernet-ring-2 { width: 270px; height: 270px; border-color: rgba(0,212,255,0.15); animation-delay: 0.5s; } .safernet-ring-3 { width: 340px; height: 340px; border-color: rgba(74,222,128,0.08); animation-delay: 1s; } @keyframes snRingPulse { 0%,100% { opacity: 1; transform: translate(-50%,-50%) scale(1); } 50% { opacity: 0.35; transform: translate(-50%,-50%) scale(1.06); } } /* Shield SVG */ .safernet-shield-svg { position: relative; z-index: 5; width: 200px; height: auto; filter: drop-shadow(0 0 25px rgba(74,222,128,0.5)) drop-shadow(0 0 60px rgba(0,212,255,0.25)); animation: snShieldFloat 4.5s ease-in-out infinite; } @keyframes snShieldFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } } /* Glow behind shield */ .safernet-shield-scene::before { content: ""; position: absolute; width: 250px; height: 250px; background: radial-gradient(circle, rgba(74,222,128,0.2), rgba(0,212,255,0.1) 50%, transparent 70%); filter: blur(40px); z-index: 1; animation: snGlowPulse 3s ease-in-out infinite; } @keyframes snGlowPulse { 0%,100% { opacity: 0.5; } 50% { opacity: 1; } } /* Orbiting device icons around shield */ .safernet-orbit-icon { position: absolute; width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 10; font-size: 18px; border: 1px solid rgba(0,212,255,0.3); background: rgba(5,18,35,0.85); backdrop-filter: blur(8px); transition: background var(--transition), border-color var(--transition); } body.light-mode .safernet-orbit-icon { background: rgba(255,255,255,0.9); border-color: rgba(0,120,200,0.3); } .safernet-orbit-icon i { color: #00d4ff; } .safernet-orbit-1 { top: 5%; left: 50%; transform: translateX(-50%); animation: snOrbit1 5s ease-in-out infinite; } .safernet-orbit-2 { top: 25%; right: 0%; animation: snOrbit2 5s ease-in-out 0.5s infinite; } .safernet-orbit-3 { bottom: 25%; right: 2%; animation: snOrbit3 5s ease-in-out 1s infinite; } .safernet-orbit-4 { bottom: 5%; left: 50%; transform: translateX(-50%); animation: snOrbit4 5s ease-in-out 1.5s infinite; } .safernet-orbit-5 { top: 25%; left: 0%; animation: snOrbit5 5s ease-in-out 0.8s infinite; } @keyframes snOrbit1 { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-8px); } } @keyframes snOrbit2 { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @keyframes snOrbit3 { 0%,100% { transform: translateY(0); } 50% { transform: translateY(8px); } } @keyframes snOrbit4 { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(10px); } } @keyframes snOrbit5 { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } /* Connecting lines from icons to shield */ .safernet-connect-line { position: absolute; z-index: 4; pointer-events: none; } .safernet-connect-line line { stroke: rgba(0,212,255,0.25); stroke-width: 1.5; stroke-dasharray: 6 4; animation: snDashFlow 2s linear infinite; } @keyframes snDashFlow { to { stroke-dashoffset: -20; } } /* Ground glow */ .safernet-ground-glow { position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); width: 260px; height: 40px; background: radial-gradient(ellipse, rgba(74,222,128,0.3), rgba(0,212,255,0.15) 50%, transparent 80%); border-radius: 50%; filter: blur(12px); z-index: 3; animation: snGroundPulse 3s ease-in-out infinite; } @keyframes snGroundPulse { 0%,100% { opacity: 0.7; transform: translateX(-50%) scaleX(1); } 50% { opacity: 0.3; transform: translateX(-50%) scaleX(0.85); } } /* ── SaferNet Feature Cards (01, 02, 03) ── */ .safernet-features { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 24px; align-items: stretch; } .safernet-feature-card { border-radius: 16px; padding: 32px 24px 28px; position: relative; transition: transform 0.35s cubic-bezier(0.34,1.2,0.64,1), box-shadow 0.35s ease, background var(--transition), border-color var(--transition); overflow: hidden; } .safernet-feature-card::before { content: ""; position: absolute; top: 0; left: 20px; right: 20px; height: 2px; border-radius: 2px; } .safernet-card-vpn { background: linear-gradient(135deg, rgba(5,18,40,0.95), rgba(8,22,48,0.98)); border: 1px solid rgba(74,174,255,0.3); box-shadow: 0 0 30px rgba(74,174,255,0.06); } .safernet-card-vpn::before { background: linear-gradient(90deg, transparent, #4aaeff, transparent); box-shadow: 0 0 10px #4aaeff; } body.light-mode .safernet-card-vpn { background: #ffffff; border-color: rgba(74,174,255,0.25); box-shadow: 0 8px 28px rgba(0,0,0,0.06); } .safernet-card-threat { background: linear-gradient(135deg, rgba(5,22,14,0.95), rgba(8,28,18,0.98)); border: 1px solid rgba(74,222,128,0.3); box-shadow: 0 0 30px rgba(74,222,128,0.06); } .safernet-card-threat::before { background: linear-gradient(90deg, transparent, #4ADE80, transparent); box-shadow: 0 0 10px #4ADE80; } body.light-mode .safernet-card-threat { background: #ffffff; border-color: rgba(74,222,128,0.25); box-shadow: 0 8px 28px rgba(0,0,0,0.06); } .safernet-card-controls { background: linear-gradient(135deg, rgba(10,18,35,0.95), rgba(12,24,45,0.98)); border: 1px solid rgba(0,212,255,0.3); box-shadow: 0 0 30px rgba(0,212,255,0.06); } .safernet-card-controls::before { background: linear-gradient(90deg, transparent, #00d4ff, transparent); box-shadow: 0 0 10px #00d4ff; } body.light-mode .safernet-card-controls { background: #ffffff; border-color: rgba(0,180,220,0.25); box-shadow: 0 8px 28px rgba(0,0,0,0.06); } .safernet-feature-card:hover { transform: translateY(-6px) scale(1.01); } .safernet-card-number { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; font-family: 'Sora', sans-serif; font-weight: 700; font-size: 14px; margin-bottom: 18px; } .safernet-card-vpn .safernet-card-number { background: rgba(74,174,255,0.12); border: 1px solid rgba(74,174,255,0.3); color: #4aaeff; } .safernet-card-threat .safernet-card-number { background: rgba(74,222,128,0.12); border: 1px solid rgba(74,222,128,0.3); color: #4ADE80; } .safernet-card-controls .safernet-card-number { background: rgba(0,212,255,0.12); border: 1px solid rgba(0,212,255,0.3); color: #00d4ff; } .safernet-card-icon { width: 56px; height: 56px; border-radius: 14px; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; font-size: 26px; } .safernet-card-vpn .safernet-card-icon { background: rgba(74,174,255,0.1); border: 1px solid rgba(74,174,255,0.25); color: #4aaeff; } .safernet-card-threat .safernet-card-icon { background: rgba(74,222,128,0.1); border: 1px solid rgba(74,222,128,0.25); color: #4ADE80; } .safernet-card-controls .safernet-card-icon { background: rgba(0,212,255,0.1); border: 1px solid rgba(0,212,255,0.25); color: #00d4ff; } .safernet-card-title { font-family: 'Sora', sans-serif; font-size: 17px; font-weight: 700; color: var(--text-primary); margin-bottom: 10px; transition: color var(--transition); } .safernet-card-desc { font-size: 14px; color: var(--text-muted); line-height: 1.65; transition: color var(--transition); } /* Plus separators */ .safernet-plus { display: none; } /* ── SaferNet Benefits List (right side of cards) ── */ .safernet-benefits { display: flex; flex-direction: column; gap: 20px; padding-left: 10px; } .safernet-benefit-item { display: flex; align-items: flex-start; gap: 14px; } .safernet-benefit-icon { width: 40px; height: 40px; border-radius: 10px; background: rgba(74,222,128,0.08); border: 1px solid rgba(74,222,128,0.22); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #4ADE80; font-size: 16px; } .safernet-benefit-title { font-family: 'Sora', sans-serif; font-size: 14px; font-weight: 700; color: var(--accent-yellow); margin-bottom: 4px; transition: color var(--transition); } .safernet-benefit-desc { font-size: 13px; color: var(--text-muted); line-height: 1.5; transition: color var(--transition); } /* ============================================= SECTION 4: ZED — Proactive Vulnerability Discovery ============================================= */ .zed-section { background: var(--bg-primary); padding: 100px 24px 80px; position: relative; overflow: hidden; transition: background var(--transition); } .zed-bg-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(74,222,128,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(74,222,128,0.025) 1px, transparent 1px); background-size: 60px 60px; pointer-events: none; z-index: 0; } .zed-inner { max-width: 1300px; margin: 0 auto; position: relative; z-index: 2; } /* ── Zed Header Row ── */ .zed-header { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; margin-bottom: 60px; } .zed-header-text { max-width: 600px; } .zed-logo-row { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; } .zed-logo-icon { width: 50px; height: 50px; background: linear-gradient(135deg, rgba(253,176,34,0.15), rgba(253,176,34,0.05)); border: 2px solid rgba(253,176,34,0.4); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: 'Sora', sans-serif; font-size: 22px; font-weight: 800; color: var(--accent-yellow); } .zed-brand { font-family: 'Sora', sans-serif; font-size: 26px; font-weight: 800; letter-spacing: 0.08em; color: var(--text-primary); transition: color var(--transition); } .zed-brand-green { color: #4ADE80; } .zed-brand-tagline { display: block; font-size: 7px; letter-spacing: 0.16em; color: var(--text-dim); text-transform: uppercase; margin-top: 3px; font-weight: 600; } .zed-title { font-family: 'Sora', sans-serif; font-size: clamp(28px, 4vw, 48px); font-weight: 600; line-height: 1.1; color: var(--text-primary); margin-bottom: 22px; transition: color var(--transition); } .zed-title-orange { color: #ff6b35; } .zed-title-green { color: #4ADE80; } .zed-desc { font-size: clamp(14px, 1.4vw, 17px); color: var(--text-muted); line-height: 1.7; max-width: 560px; transition: color var(--transition); } /* ── Zed Shield Scene ── */ .zed-shield-wrapper { display: flex; align-items: center; justify-content: center; position: relative; min-height: 440px; } .zed-shield-scene { position: relative; width: 360px; height: 400px; display: flex; align-items: center; justify-content: center; } .zed-shield-scene::before { content: ""; position: absolute; width: 260px; height: 260px; background: radial-gradient(circle, rgba(74,222,128,0.18), rgba(253,176,34,0.08) 50%, transparent 70%); filter: blur(40px); z-index: 1; animation: zedGlowPulse 3s ease-in-out infinite; } @keyframes zedGlowPulse { 0%,100% { opacity: 0.5; } 50% { opacity: 1; } } /* Hex mesh behind Zed shield */ .zed-hex-mesh { position: absolute; width: 300px; height: 300px; z-index: 2; opacity: 0.3; } .zed-ring { position: absolute; border-radius: 50%; border: 1px solid; top: 50%; left: 50%; transform: translate(-50%, -50%); animation: zedRingPulse 3.5s ease-in-out infinite; } .zed-ring-1 { width: 210px; height: 210px; border-color: rgba(74,222,128,0.22); } .zed-ring-2 { width: 280px; height: 280px; border-color: rgba(253,176,34,0.15); animation-delay: 0.5s; } .zed-ring-3 { width: 350px; height: 350px; border-color: rgba(74,222,128,0.07); animation-delay: 1s; } @keyframes zedRingPulse { 0%,100% { opacity: 1; transform: translate(-50%,-50%) scale(1); } 50% { opacity: 0.3; transform: translate(-50%,-50%) scale(1.05); } } .zed-shield-svg { position: relative; z-index: 5; width: 180px; height: auto; filter: drop-shadow(0 0 20px rgba(74,222,128,0.45)) drop-shadow(0 0 50px rgba(253,176,34,0.2)); animation: zedShieldFloat 4.5s ease-in-out infinite; } @keyframes zedShieldFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } /* Zed orbiting status icons */ .zed-status-icon { position: absolute; z-index: 10; display: flex; flex-direction: column; align-items: center; gap: 6px; } .zed-status-icon-circle { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; backdrop-filter: blur(8px); } .zed-status-label { font-family: 'Sora', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; text-align: center; line-height: 1.2; max-width: 80px; } .zed-status-exploits { top: 5px; right: -35px; /* increase distance */ animation: zedFloat1 4s ease-in-out infinite; } .zed-status-exploits .zed-status-icon-circle { background: rgba(220,50,30,0.15); border: 1px solid rgba(220,50,30,0.4); color: #e84030; } .zed-status-exploits .zed-status-label { color: #e84030; } .zed-status-attackers { top: 130px; right: -65px; /* move farther right */ animation: zedFloat2 4s ease-in-out 0.6s infinite; } .zed-status-attackers .zed-status-icon-circle { background: rgba(220,130,30,0.15); border: 1px solid rgba(220,130,30,0.4); color: #e88030; } .zed-status-attackers .zed-status-label { color: #e88030; } .zed-status-risks { bottom: 35px; right: -50px; /* move farther right */ /*bottom: 18%; right: 2%;*/ animation: zedFloat3 4s ease-in-out 1.2s infinite; } .zed-status-risks .zed-status-icon-circle { background: rgba(220,180,30,0.15); border: 1px solid rgba(220,180,30,0.4); color: #e0b020; } .zed-status-risks .zed-status-label { color: #e0b020; } .zed-status-protected { top: 160px; left: -70px; /* move farther left */ /*top: 38%; left: -5%;*/ animation: zedFloat4 4s ease-in-out 0.3s infinite; } .zed-status-protected .zed-status-icon-circle { background: rgba(74,222,128,0.15); border: 1px solid rgba(74,222,128,0.4); color: #4ADE80; } .zed-status-protected .zed-status-label { color: #4ADE80; } @keyframes zedFloat1 { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @keyframes zedFloat2 { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } @keyframes zedFloat3 { 0%,100% { transform: translateY(0); } 50% { transform: translateY(8px); } } @keyframes zedFloat4 { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } /* Dashed lines connecting status icons to shield */ .zed-connect-lines { position: absolute; inset: 0; z-index: 4; pointer-events: none; } .zed-connect-lines line { stroke-width: 1.5; stroke-dasharray: 6 4; animation: zedDashFlow 2s linear infinite; } .zed-line-red { stroke: rgba(220,50,30,0.3); } .zed-line-orange { stroke: rgba(220,130,30,0.3); } .zed-line-yellow { stroke: rgba(220,180,30,0.3); } .zed-line-green { stroke: rgba(74,222,128,0.35); } @keyframes zedDashFlow { to { stroke-dashoffset: -20; } } .zed-ground-glow { position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); width: 250px; height: 40px; background: radial-gradient(ellipse, rgba(74,222,128,0.25), rgba(253,176,34,0.1) 50%, transparent 80%); border-radius: 50%; filter: blur(12px); z-index: 3; } /* ── Zed Feature Cards (5 columns) ── */ .zed-features { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-bottom: 24px; } .zed-feature-card { background: linear-gradient(135deg, rgba(5,18,35,0.95), rgba(8,24,45,0.98)); border: 1px solid rgba(74,222,128,0.18); border-radius: 14px; padding: 24px 18px 22px; position: relative; overflow: hidden; transition: transform 0.35s cubic-bezier(0.34,1.2,0.64,1), box-shadow 0.35s ease, background var(--transition), border-color var(--transition); } body.light-mode .zed-feature-card { background: #ffffff; border-color: rgba(0,140,70,0.2); box-shadow: 0 6px 24px rgba(0,0,0,0.05); } .zed-feature-card::before { content: ""; position: absolute; top: 0; left: 16px; right: 16px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, rgba(74,222,128,0.5), transparent); } .zed-feature-card:hover { transform: translateY(-5px); box-shadow: 0 12px 40px rgba(74,222,128,0.1); } .zed-card-icon { width: 60px; height: 60px; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; font-size: 20px; } .zed-card-icon-search { background: rgba(74,174,255,0.1); border: 1px solid rgba(74,174,255,0.25); color: #4aaeff; } .zed-card-icon-target { background: rgba(74,222,128,0.1); border: 1px solid rgba(74,222,128,0.25); color: #4ADE80; } .zed-card-icon-priority { background: rgba(253,176,34,0.1); border: 1px solid rgba(253,176,34,0.25); color: var(--accent-yellow); } .zed-card-icon-fix { background: rgba(74,174,255,0.1); border: 1px solid rgba(74,174,255,0.25); color: #4aaeff; } .zed-card-icon-shield { background: rgba(0,212,255,0.1); border: 1px solid rgba(0,212,255,0.25); color: #00d4ff; } .zed-card-title { font-family: 'Sora', sans-serif; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-primary); margin-bottom: 10px; transition: color var(--transition); } .zed-card-desc { font-size: 13px; color: var(--text-muted); line-height: 1.6; transition: color var(--transition); } /* ── Zed Bottom Stats Bar ── */ .zed-stats-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .zed-stat-item { display: flex; align-items: center; gap: 14px; background: linear-gradient(135deg, rgba(5,18,35,0.9), rgba(8,24,45,0.95)); border: 1px solid rgba(74,222,128,0.15); border-radius: 12px; padding: 18px 16px; transition: transform 0.3s, background var(--transition), border-color var(--transition); } body.light-mode .zed-stat-item { background: #ffffff; border-color: rgba(0,140,70,0.18); box-shadow: 0 4px 16px rgba(0,0,0,0.04); } .zed-stat-item:hover { transform: translateY(-3px); } .zed-stat-icon { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 16px; } .zed-stat-1 .zed-stat-icon { background: rgba(74,222,128,0.1); border: 1px solid rgba(74,222,128,0.25); color: #4ADE80; } .zed-stat-2 .zed-stat-icon { background: rgba(0,212,255,0.1); border: 1px solid rgba(0,212,255,0.25); color: #00d4ff; } .zed-stat-3 .zed-stat-icon { background: rgba(253,176,34,0.1); border: 1px solid rgba(253,176,34,0.25); color: var(--accent-yellow); } .zed-stat-4 .zed-stat-icon { background: rgba(74,174,255,0.1); border: 1px solid rgba(74,174,255,0.25); color: #4aaeff; } .zed-stat-text { font-family: 'Sora', sans-serif; font-size: 13px; font-weight: 700; color: var(--text-primary); line-height: 1.3; transition: color var(--transition); } /* ============================================= SCROLL REVEAL (matching site.css) ============================================= */ .reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.7s ease, transform 0.7s ease; } .reveal.visible { opacity: 1; transform: translateY(0); } .stagger-children > * { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease, transform 0.6s ease; } .stagger-children.visible > *:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0.05s; } .stagger-children.visible > *:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 0.15s; } .stagger-children.visible > *:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 0.25s; } .stagger-children.visible > *:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: 0.35s; } .stagger-children.visible > *:nth-child(5) { opacity: 1; transform: translateY(0); transition-delay: 0.45s; } /* ============================================= RESPONSIVE ============================================= */ @media (max-width: 1100px) { .safernet-features { grid-template-columns: repeat(3, 1fr); } .safernet-benefits { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; padding-left: 0; margin-top: 10px; } .safernet-benefit-item { flex: 1; min-width: 200px; } .zed-features { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .safernet-header { grid-template-columns: 1fr; gap: 20px; text-align: center; } .safernet-header-text { max-width: 100%; } .safernet-shield-wrapper { min-height: 350px; } .safernet-shield-scene { width: 280px; height: 320px; } .safernet-shield-svg { width: 160px; } .safernet-desc { max-width: 100%; margin: 0 auto; } .zed-header { grid-template-columns: 1fr; gap: 20px; text-align: center; } .zed-header-text { max-width: 100%; } .zed-shield-wrapper { min-height: 350px; } .zed-shield-scene { width: 290px; height: 340px; } .zed-shield-svg { width: 150px; } .zed-desc { max-width: 100%; margin: 0 auto; } .zed-features { grid-template-columns: repeat(2, 1fr); } .zed-stats-bar { grid-template-columns: repeat(2, 1fr); } .safernet-logo-row, .zed-logo-row { justify-content: center; } } @media (max-width: 640px) { .safernet-section, .zed-section { padding: 70px 16px 60px; } .safernet-features { grid-template-columns: 1fr; } .safernet-benefits { flex-direction: column; } .safernet-benefit-item { min-width: unset; } .safernet-shield-scene { width: 240px; height: 280px; } .safernet-shield-svg { width: 140px; } .safernet-orbit-icon { width: 36px; height: 36px; font-size: 14px; } .zed-features { grid-template-columns: 1fr; } .zed-stats-bar { grid-template-columns: 1fr; } .zed-shield-scene { width: 250px; height: 290px; } .zed-shield-svg { width: 130px; } .zed-status-icon-circle { width: 38px; height: 38px; font-size: 15px; } .zed-status-label { font-size: 7px; } } /* =================================================== SECTION 3 — SaferNet 3-in-1 =================================================== */ /*.ip-s3 { background: linear-gradient(180deg, #07111e 0%, #0a1628 100%); padding: 90px 20px; position: relative; overflow: hidden; } .ip-s3::after { content: ''; position: absolute; top: -100px; right: -100px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(74,174,255,0.07), transparent 65%); pointer-events: none; } .ip-s3__container { max-width: 1180px; margin: 0 auto; position: relative; z-index: 2; } .ip-s3__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; } .ip-s3__heading { font-family: 'Sora', sans-serif; font-size: clamp(26px, 3vw, 38px); font-weight: 700; color: var(--tp2-text); line-height: 1.2; margin: 0 0 16px; } .ip-s3__desc { font-size: 15px; color: rgba(255,255,255,0.55); line-height: 1.7; margin: 0 0 36px; } .ip-s3__features { display: flex; flex-direction: column; gap: 20px; margin-bottom: 36px; } .ip-s3__feat { display: flex; gap: 18px; align-items: flex-start; } .ip-s3__feat-icon { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; } .ip-s3__feat-icon--blue { background: rgba(74,174,255,0.10); border: 1px solid rgba(74,174,255,0.22); } .ip-s3__feat-text h4 { font-family: 'Sora', sans-serif; font-size: 16px; font-weight: 600; color: var(--tp2-text); margin: 0 0 6px; } .ip-s3__feat-text p { font-size: 14px; color: rgba(255,255,255,0.5); line-height: 1.6; margin: 0; } .ip-s3__actions { display: flex; gap: 14px; flex-wrap: wrap; }*/ /* RIGHT — image slot */ /*.ip-s3__right { display: flex; align-items: center; justify-content: center; } .ip-s3__img-wrap { width: 100%; max-width: 480px; min-height: 340px; border-radius: 14px; border: 1px dashed rgba(74,174,255,0.18); background: rgba(255,255,255,0.02); display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; }*/ /* placeholder label — hidden once img has a real src */ /*.ip-s3__img-wrap::before { content: 'Your image goes here'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; color: rgba(255,255,255,0.18); pointer-events: none; } .ip-s3__img { width: 100%; height: auto; display: block; border-radius: 14px; position: relative; z-index: 1; }*/ /* hide placeholder when image loads */ /*.ip-s3__img-wrap:has(img[src]:not([src=""])) ::before { display: none; }*/ /* light mode */ /*body.light-mode .ip-s3 { background: #f0f4f8; } body.light-mode .ip-s3__heading { color: #0a1628; } body.light-mode .ip-s3__desc { color: rgba(10,22,40,0.6); } body.light-mode .ip-s3__feat-text h4 { color: #0a1628; } body.light-mode .ip-s3__feat-text p { color: rgba(10,22,40,0.55); } body.light-mode .ip-s3__img-wrap { background: rgba(0,0,0,0.04); } @media (max-width: 860px) { .ip-s3__grid { grid-template-columns: 1fr; gap: 40px; } .ip-s3__right { order: -1; } .ip-s3__img-wrap { max-width: 100%; } }*/ /* =================================================== SECTION 4 — Proactive Vulnerability Discovery =================================================== */ /*.ip-s4 { background: linear-gradient(180deg, #0a1628 0%, #07111e 100%); padding: 90px 20px; position: relative; overflow: hidden; } .ip-s4::before { content: ''; position: absolute; bottom: -80px; left: -80px; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle, rgba(74,222,128,0.06), transparent 65%); pointer-events: none; } .ip-s4__container { max-width: 1180px; margin: 0 auto; position: relative; z-index: 2; } .ip-s4__header { text-align: center; margin-bottom: 50px; } .ip-s4__title { font-family: 'Sora', sans-serif; font-size: clamp(26px, 3.5vw, 42px); font-weight: 700; color: var(--tp2-text); line-height: 1.15; margin: 0 0 14px; } .ip-s4__sub { font-size: clamp(14px, 1.3vw, 17px); color: rgba(255,255,255,0.5); max-width: 680px; margin: 0 auto; line-height: 1.65; }*/ /* three columns */ /*.ip-s4__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 56px; } .ip-s4__col { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 24px 22px; transition: background 0.3s, border-color 0.3s, transform 0.3s; } .ip-s4__col:hover { background: rgba(74,222,128,0.05); border-color: rgba(74,222,128,0.22); transform: translateY(-5px); } .ip-s4__col-icon { width: 44px; height: 44px; border-radius: 10px; background: rgba(74,222,128,0.10); border: 1px solid rgba(74,222,128,0.22); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; } .ip-s4__col h4 { font-family: 'Sora', sans-serif; font-size: 16px; font-weight: 600; color: #fff; margin: 0 0 8px; } .ip-s4__col p { font-size: 14px; color: rgba(255,255,255,0.5); line-height: 1.65; margin: 0; }*/ /* large image placeholder */ /*.ip-s4__img-row { display: flex; justify-content: center; margin-bottom: 48px; }*/ /*.ip-s4__img-wrap { width: 50%; min-height: 360px; border-radius: 16px; border: 1px dashed rgba(74,222,128,0.15); background: rgba(255,255,255,0.025); display: flex; overflow: hidden; position: relative; align-items: center; justify-content: center; }*/ /*.ip-s4__img-wrap { width: 50%; min-height: 360px; border-radius: 16px; border: 1px dashed rgba(74,222,128,0.15); background: rgba(255,255,255,0.025); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }*/ /* Proper image centering */ /*.ip-s4__img { display: block; max-width: 80%; max-height: 80%; margin: auto;*/ /* extra safety */ /*} .ip-s4__img-wrap::before { content: 'Your image goes here'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; color: rgba(255,255,255,0.15); pointer-events: none; }*/ /* .ip-s4__img { width: 100%; height: auto; display: block; border-radius: 16px; position: relative; z-index: 1; }*/ /*.ip-s4__img-wrap:has(img[src]:not([src=""])) ::before { display: none; }*/ /* CTA */ /*.ip-s4__cta { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }*/ /* light mode */ /*body.light-mode .ip-s4 { background: #e8eef5; } body.light-mode .ip-s4__title { color: #0a1628; } body.light-mode .ip-s4__sub { color: rgba(10,22,40,0.6); } body.light-mode .ip-s4__col { background: rgba(255,255,255,0.75); border-color: rgba(0,0,0,0.08); } body.light-mode .ip-s4__col:hover { background: rgba(74,222,128,0.06); border-color: rgba(74,222,128,0.25); } body.light-mode .ip-s4__col h4 { color: #0a1628; } body.light-mode .ip-s4__col p { color: rgba(10,22,40,0.55); } body.light-mode .ip-s4__img-wrap { background: rgba(0,0,0,0.04); } @media (max-width: 768px) { .ip-s4__cols { grid-template-columns: 1fr; } .ip-s4__img-wrap { min-height: 220px; } }*/ /* ============================================= VIDEO SECTION ============================================= */ .videosection { background: linear-gradient(90deg, #0a1628, #0d1e35); padding: 80px 0; color: white; transition: background var(--transition); } body.light-mode .videosection { background: linear-gradient(90deg, #e8eef5, #f0f4f8); } body.light-mode .videosection * { color: #0a1628 !important; } body.light-mode .vbadge { background: #d0dcea; color: #0a1628 !important; } body.light-mode .vfeature-list li { color: #2a3e54 !important; } .videocontainer { max-width: 1200px; margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 60px; padding: 0 40px; } .left-content { flex: 1; } .right-video { flex: 1; } .vbadge { background: #203b59; padding: 6px 12px; border-radius: 6px; font-size: 13px; color: #a5aab1; } .left-content h1 { font-size: clamp(28px, 3vw, 40px); line-height: 1.15; margin: 20px 0; font-weight: 700; font-family: 'Sora', sans-serif; color: white; } .left-content p { font-size: clamp(14px, 1.3vw, 18px); line-height: 1.7; color: #a5aab1; } .vfeature-list { list-style: none; padding-left: 0; margin-top: 20px; } .vfeature-list li { position: relative; padding-left: 22px; margin-bottom: 12px; font-family: 'Sora', sans-serif; font-weight: 400; color: #cbd6e2; font-size: 15px; } .vfeature-list li::before { content: ""; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; background: #22c55e; border-radius: 50%; } .btn-link { display: inline-block; margin-top: 16px; color: white; text-decoration: none; font-weight: 400; font-family: 'Inter', sans-serif; transition: letter-spacing 0.2s; } .btn-link:hover { letter-spacing: 0.5px; } .video-box { position: relative; cursor: pointer; border-radius: 12px; overflow: hidden; border: 2px solid transparent; transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease; } .video-box img { width: 100%; display: block; } .video-box:hover { transform: scale(1.02) translateY(-6px); border-color: var(--accent-green); box-shadow: 0 0 24px rgba(74,222,128,0.35); } .video-box:hover .play-btn { transform: translate(-50%, -50%) scale(1.15); } .play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80px; height: 80px; background: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28px; color: #0a1628; transition: transform 0.3s ease, box-shadow 0.3s; box-shadow: 0 4px 20px rgba(0,0,0,0.3); } .video-length { margin-top: 10px; font-size: 12px; color: #d1d6d9; text-align: center; } /* Modal */ .modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.88); justify-content: center; align-items: center; z-index: 99999; animation: modalFadeIn 0.3s ease; } @keyframes modalFadeIn { from { opacity: 0; } to { opacity: 1; } } .modal.open { display: flex; } .modal-content { position: relative; width: 800px; max-width: 92vw; animation: modalZoom 0.3s ease; } @keyframes modalZoom { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } } .modal video { width: 100%; border-radius: 12px; } .close { position: absolute; top: -38px; right: 0; font-size: 26px; color: white; cursor: pointer; transition: color 0.2s; } .close:hover { color: var(--accent-green); } /* ============================================= FEATURES SECTION ============================================= */ .features-section { padding: 80px 20px; background: linear-gradient(to bottom, #0f2847, #152f52); color: white; transition: background var(--transition); } body.light-mode .features-section { background: linear-gradient(to bottom, #e0e8f3, #edf2f9); } body.light-mode .features-section * { color: #0a1628; } body.light-mode .section-header p { color: rgba(10,22,40,0.65); } body.light-mode .feature-card { background: rgba(255,255,255,0.7); border-color: rgba(0,0,0,0.10); } body.light-mode .feature-card p { color: rgba(10,22,40,0.65); } body.light-mode .feature-card:hover { border-color: #22c55e; } body.light-mode .btn-outline { border-color: rgba(10,22,40,0.3); color: #0a1628; } body.light-mode .btn-outline:hover { background: rgba(10,22,40,0.08); border-color: #0a1628; } .fcontainer { max-width: 1200px; margin: auto; } .section-header { text-align: center; max-width: 700px; margin: 0 auto 60px; } .section-header h2 { font-size: clamp(28px, 3.5vw, 40px); margin-bottom: 15px; font-family: 'Sora', sans-serif; } .section-header p { color: rgba(255,255,255,0.7); font-size: clamp(15px, 1.4vw, 18px); } .features-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .feature-card { background: var(--bg-card); border: 1px solid var(--border-card); padding: 25px; border-radius: var(--radius); transition: border-color var(--transition), transform 0.3s ease, box-shadow 0.3s ease, background var(--transition); cursor: default; } .feature-card:hover { border-color: var(--accent-green); transform: translateY(-6px); box-shadow: 0 12px 28px rgba(0,0,0,0.25); background: var(--bg-card-hover); } .icon-box { width: 48px; height: 48px; background: linear-gradient(135deg, #4ADE80, #3bc56a); display: flex; align-items: center; justify-content: center; border-radius: var(--radius); font-size: 22px; color: #0a1628; margin-bottom: 15px; transition: transform 0.3s; } .feature-card:hover .icon-box { transform: scale(1.1) rotate(-3deg); } .feature-card h3 { font-size: clamp(15px, 1.2vw, 18px); margin-bottom: 8px; } .feature-card p { font-size: clamp(13px, 1vw, 15px); color: rgba(255,255,255,0.7); line-height: 1.6; } .cta { text-align: center; margin-top: 70px; } .cta p { margin-bottom: 20px; color: rgba(255,255,255,0.7); } .cta-buttons { display: flex; justify-content: center; gap: 15px; flex-wrap: wrap; } .btn-primary { background: var(--accent-yellow); color: #0a1628; padding: 14px 28px; border: none; border-radius: var(--radius); font-weight: 600; cursor: pointer; transition: background var(--transition), transform 0.2s, box-shadow 0.2s; } .btn-primary:hover { background: #e59a15; transform: translateY(-2px); box-shadow: 0 6px 18px rgba(253,176,34,0.35); } .btn-outline { background: transparent; border: 2px solid rgba(255,255,255,0.3); color: white; padding: 14px 28px; border-radius: var(--radius); cursor: pointer; transition: background var(--transition), border-color var(--transition), transform 0.2s; } .btn-outline:hover { background: rgba(255,255,255,0.1); border-color: white; transform: translateY(-2px); } /* ============================================= WHY Infinite Protection ============================================= */ .why-safernet { padding: 80px 20px; background: linear-gradient(to bottom, #0f2847, #152f52); color: white; transition: background var(--transition); } body.light-mode .why-safernet { background: linear-gradient(to bottom, #edf2f9, #e0e8f3); } body.light-mode .ysection-header h2 { color: #0a1628; } body.light-mode .ysection-header p { color: rgba(10,22,40,0.65); } body.light-mode .ysection-header .label { color: rgba(10,22,40,0.55); border-color: rgba(10,22,40,0.2); background: rgba(10,22,40,0.05); } body.light-mode .ycard { background: rgba(255,255,255,0.75); border-color: rgba(0,0,0,0.1); color: #0a1628; } body.light-mode .ycard p { color: rgba(10,22,40,0.65); } body.light-mode .ycard:hover { border-color: rgba(0,0,0,0.25); } body.light-mode .ysection-footer { color: rgba(10,22,40,0.35); } .ycontainer { max-width: 1200px; margin: 0 auto; } .ysection-header { text-align: center; margin-bottom: 3rem; } .ysection-header .label { display: inline-block; padding: 0.25rem 1rem; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); border-radius: 999px; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; color: rgba(255,255,255,0.7); margin-bottom: 0.75rem; } .ysection-header h2 { font-family: 'Sora', sans-serif; font-size: clamp(28px, 3.5vw, 40px); font-weight: 600; line-height: 1.2; margin-bottom: 0.75rem; } .ysection-header p { font-size: 16px; color: rgba(255,255,255,0.7); max-width: 700px; margin: 0 auto; line-height: 1.6; } .ycards { display: flex; gap: 1.5rem; margin-bottom: 1.5rem; flex-wrap: wrap; } .ycard { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); border-radius: 1rem; padding: 1.5rem; flex: 1; min-width: 250px; display: flex; flex-direction: column; transition: border-color var(--transition), transform 0.3s ease, box-shadow 0.3s ease; text-decoration: none; color: white; } .ycard:hover { border-color: rgba(255,255,255,0.4); transform: translateY(-5px); box-shadow: var(--shadow-card); } .ycard h3 { font-family: 'Sora', sans-serif; font-size: clamp(18px, 1.5vw, 22px); margin-bottom: 0.75rem; min-height: 3rem; } .ycard p { font-size: 15px; color: rgba(255,255,255,0.7); margin-bottom: 1rem; line-height: 1.6; } .ycard-link { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; color: var(--accent-yellow); margin-top: auto; transition: gap 0.3s; } .ycard:hover .ycard-link { gap: 0.75rem; } .ycard-link svg { transition: transform 0.3s; } .ycard:hover .ycard-link svg { transform: translateX(4px); } .ysection-footer { text-align: center; color: rgba(255,255,255,0.4); font-size: 14px; margin-top: 1.5rem; } /* ============================================= AI MONITOR SECTION ============================================= */ .sn-section *, .sn-section *::before, .sn-section *::after { box-sizing: border-box; } .sn-section { padding: 80px 24px; background: linear-gradient(to bottom, #0a1628, #0d1e35); border-top: 1px solid rgba(255,255,255,0.05); position: relative; overflow: hidden; font-family: 'Inter', sans-serif; transition: background var(--transition); } body.light-mode .sn-section { background: linear-gradient(to bottom, #f0f4f8, #e8eef5); border-top-color: rgba(0,0,0,0.06); } .sn-container { max-width: 1200px; margin: 0 auto; position: relative; z-index: 10; } .sn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } .sn-left { display: flex; flex-direction: column; gap: 24px; } .sn-badge { display: inline-flex; align-items: center; padding: 6px 12px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); border-radius: 5px; font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.8); width: fit-content; transition: background var(--transition), border-color var(--transition), color var(--transition); } body.light-mode .sn-badge { background: rgba(0,0,0,0.06); border-color: rgba(0,0,0,0.15); color: #0a1628; } .sn-heading { font-family: 'Sora', sans-serif; font-size: clamp(26px, 3vw, 42px); font-weight: 600; line-height: 1.15; color: var(--text-primary); margin: 0; } .sn-lead { font-size: 17px; line-height: 1.6; color: var(--text-muted); margin: 0; } /* Accordion */ .sn-accordion { display: flex; flex-direction: column; gap: 10px; } .sn-acc-item { border-radius: 5px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.03); transition: background 0.25s, border-color 0.25s; overflow: hidden; } body.light-mode .sn-acc-item { border-color: rgba(0,0,0,0.10); background: rgba(0,0,0,0.03); } .sn-acc-item.sn-open { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.2); box-shadow: 0 4px 24px rgba(0,0,0,0.2); } body.light-mode .sn-acc-item.sn-open { background: rgba(0,0,0,0.06); border-color: rgba(0,0,0,0.2); } .sn-acc-item:hover:not(.sn-open) { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.15); } body.light-mode .sn-acc-item:hover:not(.sn-open) { background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.15); } .sn-acc-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px; text-align: left; background: none; border: none; cursor: pointer; color: var(--text-primary); font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 500; line-height: 1.4; } .sn-acc-icon { flex-shrink: 0; color: rgba(255,255,255,0.6); transition: transform 0.25s; } body.light-mode .sn-acc-icon { color: rgba(10,22,40,0.5); } .sn-acc-item.sn-open .sn-acc-icon { transform: rotate(180deg); } .sn-acc-body { max-height: 0; overflow: hidden; transition: max-height 0.35s ease, opacity 0.35s ease; opacity: 0; } .sn-acc-item.sn-open .sn-acc-body { max-height: 200px; opacity: 1; } .sn-acc-body p { margin: 0; padding: 0 16px 16px; font-size: 15px; line-height: 1.65; color: var(--text-muted); } .sn-cta { display: inline-flex; align-items: center; gap: 8px; color: var(--text-muted); text-decoration: none; font-size: 15px; font-weight: 500; transition: color 0.2s; width: fit-content; } .sn-cta:hover { color: var(--text-primary); } .sn-cta svg { transition: transform 0.2s; } .sn-cta:hover svg { transform: translateX(3px); } /* Radar */ .sn-right { display: flex; flex-direction: column; align-items: center; gap: 20px; } .sn-radar-wrap { position: relative; width: 100%; max-width: 480px; aspect-ratio: 1; } .sn-ring { position: absolute; border-radius: 50%; border: 1px solid rgba(74,222,128,0.2); box-shadow: 0 0 20px rgba(74,222,128,0.1); } .sn-ring-outer { inset: 12%; animation: snProtectionPulse 3s ease-in-out infinite; } .sn-ring-inner { inset: 25%; border-color: rgba(74,222,128,0.25); animation: snProtectionPulse 3s ease-in-out 0.5s infinite; } .sn-ring-glow { inset: 12%; border: none; border-radius: 50%; background: radial-gradient(circle, rgba(74,222,128,0.06), rgba(74,222,128,0.02) 60%, transparent); animation: snShieldPulse 4s ease-in-out infinite; } .sn-radar-svg { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; } .sn-sweep { transform-origin: 50% 50%; animation: snRadarSweep 8s linear infinite; } .sn-connectors { position: absolute; inset: 0; pointer-events: none; z-index: 5; } .sn-center-card { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 30; } .sn-center-inner { position: relative; background: rgba(255,255,255,0.1); backdrop-filter: blur(12px); border-radius: 5px; padding: 24px; border: 1px solid rgba(255,255,255,0.2); box-shadow: 0 8px 32px rgba(0,0,0,0.3); display: flex; flex-direction: column; align-items: center; gap: 10px; transition: background var(--transition), border-color var(--transition); } body.light-mode .sn-center-inner { background: rgba(255,255,255,0.7); border-color: rgba(0,0,0,0.15); } .sn-center-inner::before { content: ''; position: absolute; inset: -24px; background: rgba(74,222,128,0.12); filter: blur(24px); border-radius: 50%; z-index: -1; } .sn-brain-icon { width: 56px; height: 56px; background: linear-gradient(135deg, #4ADE80, #22c55e); border-radius: 5px; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(74,222,128,0.35); } .sn-card-title { font-size: 15px; font-weight: 700; color: var(--text-primary); text-align: center; } .sn-card-sub { font-size: 11px; color: var(--text-muted); font-weight: 500; text-align: center; margin-top: 2px; } .sn-green-badge { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 5px; font-size: 13px; font-weight: 500; background: rgba(74,222,128,0.2); color: #4ADE80; border: 1px solid rgba(74,222,128,0.3); } /* Device nodes */ .sn-device { position: absolute; z-index: 10; transform: translate(-50%, -50%); } .sn-device-card { position: relative; background: rgba(255,255,255,0.05); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.1); border-radius: 5px; padding: 12px; display: flex; flex-direction: column; align-items: center; gap: 6px; transition: transform 0.2s, box-shadow 0.2s, background var(--transition); } body.light-mode .sn-device-card { background: rgba(255,255,255,0.8); border-color: rgba(0,0,0,0.1); } .sn-device-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.3); } .sn-device-icon { width: 36px; height: 36px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 5px; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.8); } body.light-mode .sn-device-icon { background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.1); color: #0a1628; } .sn-device-name { font-size: 10px; font-weight: 600; color: var(--text-primary); white-space: nowrap; } .sn-device-dot { position: absolute; top: -6px; right: -6px; width: 16px; height: 16px; background: #4ADE80; border-radius: 50%; border: 2px solid #0a1628; display: flex; align-items: center; justify-content: center; } body.light-mode .sn-device-dot { border-color: #e8eef5; } .sn-device-dot::after { content: ''; width: 6px; height: 6px; background: white; border-radius: 50%; } /* Status bar */ .sn-status-bar { background: rgba(255,255,255,0.08); backdrop-filter: blur(12px); border-radius: 5px; padding: 16px 20px; border: 1px solid rgba(255,255,255,0.15); width: 100%; max-width: 480px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; transition: background var(--transition), border-color var(--transition); } body.light-mode .sn-status-bar { background: rgba(255,255,255,0.7); border-color: rgba(0,0,0,0.1); } .sn-status-item { display: flex; align-items: center; gap: 8px; } .sn-status-label { font-size: 13px; color: var(--text-muted); font-weight: 500; } .sn-status-value { font-size: 13px; font-weight: 600; color: var(--text-primary); } /* Keyframes */ @keyframes snRadarSweep { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes snProtectionPulse { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:0.7; transform:scale(1.01); } } @keyframes snShieldPulse { 0%,100% { opacity:0.3; } 50% { opacity:0.6; } } /* ============================================= TESTIMONIALS ============================================= */ .testimonial-section { padding: 90px 20px; background: linear-gradient(to bottom, #0a1628, #0d1e35); position: relative; overflow: hidden; color: white; font-family: 'Sora', sans-serif; transition: background var(--transition); } body.light-mode .testimonial-section { background: linear-gradient(to bottom, #e0e8f3, #edf2f9); } body.light-mode .tsection-header h2 { color: #0a1628; } body.light-mode .tsection-header p { color: rgba(10,22,40,0.65); } body.light-mode .testimonial-card { background: rgba(255,255,255,0.8); border-color: rgba(0,0,0,0.1); } body.light-mode .testimonial-text { color: rgba(10,22,40,0.85); } body.light-mode .tauthor h4 { color: #0a1628; } body.light-mode .tauthor span { color: rgba(10,22,40,0.55); } body.light-mode .tauthor { border-top-color: rgba(0,0,0,0.1); } body.light-mode .tstats { color: #0a1628; } .tcontainer { max-width: 1200px; margin: auto; } .tsection-header { text-align: center; max-width: 700px; margin: auto; margin-bottom: 60px; } .tsection-header h2 { font-family: 'Sora', sans-serif; font-size: clamp(26px, 3.5vw, 40px); font-weight: 600; margin-bottom: 15px; } .tsection-header p { color: rgba(255,255,255,0.7); font-size: clamp(15px, 1.4vw, 18px); line-height: 1.6; font-family: 'Inter', sans-serif; } .testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; } .testimonial-card { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.2); padding: 30px; border-radius: var(--radius); backdrop-filter: blur(10px); display: flex; flex-direction: column; height: 100%; transition: background 0.3s, transform 0.3s ease, box-shadow 0.3s; } .testimonial-card:hover { background: rgba(255,255,255,0.14); transform: translateY(-6px); box-shadow: var(--shadow-card); } .tquote { font-size: 28px; color: var(--accent-yellow); opacity: 0.7; } .tstars { color: var(--accent-yellow); margin: 10px 0; font-size: 20px; } .testimonial-text { color: rgba(255,255,255,0.9); line-height: 1.6; margin-bottom: 16px; font-size: clamp(14px, 1.1vw, 16px); } .tauthor { border-top: 1px solid rgba(255,255,255,0.15); padding-top: 15px; margin-top: auto; } .tauthor h4 { margin: 0; font-size: 15px; } .tauthor span { font-size: 14px; color: rgba(255,255,255,0.6); } .tstats { margin-top: 60px; display: flex; justify-content: center; flex-wrap: wrap; gap: 40px; opacity: 0.7; font-size: 14px; } /* ══════════════════════════════════════ PRICING SECTION — from your main CSS ══════════════════════════════════════ */ .pricing-wrap { position: relative; z-index: 1; max-width: 1100px; margin: 0 auto; padding: 0 24px; } /* toggle */ /*.toggle-bar { position: fixed; top: 20px; right: 24px; z-index: 100; display: flex; align-items: center; gap: 10px; } .toggle-btn { width: 52px; height: 28px; border-radius: 14px; background: var(--surface2); border: 1px solid var(--border-blue); cursor: pointer; display: flex; align-items: center; padding: 3px; transition: background 0.3s; } .toggle-btn::before { content: ''; width: 22px; height: 22px; border-radius: 50%; background: var(--accent-blue); transition: transform 0.3s; display: block; } [data-theme="light"] .toggle-btn::before { transform: translateX(24px); } .toggle-label { font-size: 12px; color: var(--text2); font-family: 'Rajdhani', sans-serif; letter-spacing: 1px; text-transform: uppercase; }*/ /* header */ pricing-header { padding: 80px 0 40px; text-align: center; animation: fadeUp 0.8s ease both; } .pricing-shield-wrap { width: 68px; height: 68px; margin: 0 auto 24px; animation: pulseGlow 3s ease-in-out infinite; } .pricing-h1 { font-family: 'Sora', sans-serif; font-size: clamp(32px, 6vw, 62px); font-weight: 600; letter-spacing: -1px; line-height: 1.1; } .pricing-h1 em { font-style: normal; color: var(--accent-green); } .pricing-subtitle { margin-top: 14px; font-size: 16px; color: var(--text2); font-weight: 300; } /* cards */ .pricing-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; padding: 40px 0 20px; } .pricing-card { background: var(--surface); border-radius: 16px; padding: 36px 26px 30px; position: relative; border: 2px solid; text-align: center; transition: transform 0.3s, box-shadow 0.3s; animation: fadeUp 0.8s ease both; overflow: hidden; } .pricing-card::after { content: ''; position: absolute; inset: 0; border-radius: 14px; opacity: 0; transition: opacity 0.3s; pointer-events: none; } .pricing-card:hover { transform: translateY(-7px); } .pricing-card:hover::after { opacity: 1; } .pricing-card.blue { border-color: var(--border-blue); animation-delay: .1s; } .pricing-card.green { border-color: var(--border-green); animation-delay: .2s; background: var(--surface2); } .pricing-card.purple { border-color: var(--border-purple); animation-delay: .3s; } .pricing-card.blue::after { background: rgba(30,180,255,0.07); } .pricing-card.green::after { background: rgba(0,230,120,0.07); } .pricing-card.purple::after { background: rgba(170,90,255,0.07); } .pricing-card.blue:hover { box-shadow: 0 0 0 1px var(--border-blue), 0 8px 40px rgba(30,180,255,0.2); } .pricing-card.green:hover { box-shadow: 0 0 0 1px var(--border-green), 0 8px 40px rgba(0,230,120,0.2); } .pricing-card.purple:hover { box-shadow: 0 0 0 1px var(--border-purple), 0 8px 40px rgba(170,90,255,0.2); } .pricing-badge-popular { position: absolute; top: -1px; left: 50%; transform: translateX(-50%); background: var(--accent-green); color: #011a08; font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; padding: 5px 20px; border-radius: 0 0 10px 10px; white-space: nowrap; } [data-theme="light"] .badge-popular { color: #fff; } .pricing-card-icon { width: 64px; height: 85px; margin: 0 auto 14px; border-radius: 50%; /*border: 1.5px solid;*/ display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; } .pricing-card.blue .card-icon { border-color: var(--border-blue); background: rgba(30,180,255,0.08); } .pricing-card.green .card-icon { border-color: var(--border-green); background: rgba(0,230,120,0.08); } .pricing-card.purple .card-icon { border-color: var(--border-purple); background: rgba(170,90,255,0.08); } .pricing-card-title { font-family: 'Sora', sans-serif; font-size: 30px; font-weight: 600; letter-spacing: 1px; margin-bottom: 8px; } .pricing-card.blue .card-title { color: var(--accent-blue); } .pricing-card.green .card-title { color: var(--accent-green); } .pricing-card.purple .card-title { color: var(--accent-purple); } .pricing-card-desc { font-size: 13px; color: var(--text2); line-height: 1.55; margin-bottom: 18px; min-height: 38px; } /* gradient divider — bright shiny center, fades to nothing on sides */ .pricing-divider { height: 2px; border: none; margin-bottom: 18px; border-radius: 2px; } .pricing-card.blue .divider { background: linear-gradient(90deg, transparent 0%, rgba(30,180,255,0.4) 20%, #1eb4ff 42%, #ffffff 50%, #1eb4ff 58%, rgba(30,180,255,0.4) 80%, transparent 100%); } .pricing-card.green .divider { background: linear-gradient(90deg, transparent 0%, rgba(0,230,120,0.4) 20%, #00e87a 42%, #ffffff 50%, #00e87a 58%, rgba(0,230,120,0.4) 80%, transparent 100%); } .pricing-card.purple .divider { background: linear-gradient(90deg, transparent 0%, rgba(170,90,255,0.4) 20%, #aa5aff 42%, #e0c8ff 50%, #aa5aff 58%, rgba(170,90,255,0.4) 80%, transparent 100%); } [data-theme="light"] .pricing-card.blue .divider { background: linear-gradient(90deg, transparent 0%, rgba(0,100,210,0.35) 20%, #0064d2 42%, #80b8f8 50%, #0064d2 58%, rgba(0,100,210,0.35) 80%, transparent 100%); } [data-theme="light"] .pricing-card.green .divider { background: linear-gradient(90deg, transparent 0%, rgba(0,140,70,0.35) 20%, #008c46 42%, #60d090 50%, #008c46 58%, rgba(0,140,70,0.35) 80%, transparent 100%); } [data-theme="light"] .pricing-card.purple .divider { background: linear-gradient(90deg, transparent 0%, rgba(100,35,210,0.35) 20%, #6423d2 42%, #b090f0 50%, #6423d2 58%, rgba(100,35,210,0.35) 80%, transparent 100%); } .pricing-price-row { display: flex; align-items: baseline; gap: 6px; margin-bottom: 22px; } .pricing-price { font-family: 'Rajdhani', sans-serif; font-size: 52px; font-weight: 700; line-height: 1; color: var(--text); } .pricing-price-mo { font-size: 14px; color: var(--text2); font-weight: 300; } /* features */ .pricing-features { list-style: none; margin-bottom: 26px; display: flex; flex-direction: column; gap: 12px; text-align: left; } .pricing-features li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: var(--text2); line-height: 1.5; } /* checkmark circle */ .pricing-chk { width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-top: 1px; } .pricing-card.blue .chk { background: var(--chk-blue); border: 1.5px solid var(--accent-blue); } .pricing-card.green .chk { background: var(--chk-green); border: 1.5px solid var(--accent-green); } .pricing-card.purple .chk { background: var(--chk-purple); border: 1.5px solid var(--accent-purple); } .pricing-chk svg { width: 12px; height: 12px; display: block; } .pricing-feat-sub { display: block; font-size: 11.5px; margin-top: 2px; } .pricing-card.blue .feat-sub { color: rgba(30,180,255,0.65); } .pricing-card.green .feat-sub { color: rgba(0,230,120,0.65); } .pricing-card.purple .feat-sub { color: rgba(170,90,255,0.65); } /* CTA */ .pricing-cta-btn { display: block; width: 100%; padding: 14px; border-radius: 10px; font-family: 'Rajdhani', sans-serif; font-size: 16px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; border: 1.5px solid; cursor: pointer; text-align: center; text-decoration: none; transition: transform 0.2s, box-shadow 0.2s, background 0.2s; background: transparent; } .pricing-cta-btn:hover { transform: scale(1.02); } .pricing-cta-btn:active { transform: scale(0.98); } .pricing-card.blue .pricing-cta-btn { border-color: var(--accent-blue); color: var(--accent-blue); background: rgba(30,180,255,0.08); } .pricing-card.blue .pricing-cta-btn:hover { background: rgba(30,180,255,0.18); box-shadow: 0 0 20px rgba(30,180,255,0.3); } .pricing-card.green .pricing-cta-btn { border-color: var(--accent-green); color: #011a08; background: var(--accent-green); } .pricing-card.green .pricing-cta-btn:hover { background: #00ff88; box-shadow: 0 0 22px rgba(0,230,120,0.4); } [data-theme="light"] .pricing-card.green .cta-btn { color: #fff; } .pricing-card.purple .pricing-cta-btn { border-color: var(--accent-purple); color: var(--accent-purple); background: rgba(170,90,255,0.08); } .pricing-card.purple .pricing-cta-btn:hover { background: rgba(170,90,255,0.18); box-shadow: 0 0 20px rgba(170,90,255,0.3); } /* scan line */ .pricing-scan-line { position: absolute; left: 0; right: 0; height: 1px; top: -1px; animation: scan 4s linear infinite; opacity: 0; transition: opacity 0.3s; } .pricing-card.blue .pricing-scan-line { background: linear-gradient(90deg, transparent, var(--accent-blue), transparent); } .pricing-card.green .pricing-scan-line { background: linear-gradient(90deg, transparent, var(--accent-green), transparent); } .pricing-card.purple .pricing-scan-line { background: linear-gradient(90deg, transparent, var(--accent-purple), transparent); } .pricing-card:hover .pricing-scan-line { opacity: 1; } [data-theme="light"] .pricing-scan-line { display: none; } @keyframes scan { from { top: -1px; } to { top: calc(100% + 1px); } } /* footer pills */ .pricing-footer-pills { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; padding: 36px 0 60px; animation: fadeUp 0.8s 0.5s ease both; } .pricing-pill { display: flex; gap: 14px; align-items: flex-start; background: var(--pill-bg); border: 1px solid var(--pill-bd); border-radius: 12px; padding: 16px; transition: border-color 0.3s; } .pricing-pill:hover { border-color: var(--border-blue); } .pricing-pill-icon { width: 44px; height: 44px; flex-shrink: 0; border-radius: 10px; background: var(--pill-icon-bg); border: 1px solid var(--pill-icon-bd); display: flex; align-items: center; justify-content: center; } .pricing-pill-title { font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 14px; letter-spacing: 0.4px; color: var(--text); } .pricing-pill-text { font-size: 12px; color: var(--text2); line-height: 1.5; margin-top: 3px; } @keyframes fadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } } @keyframes pulseGlow { 0%,100% { filter: drop-shadow(0 0 8px rgba(0,230,120,0.45)); } 50% { filter: drop-shadow(0 0 22px rgba(0,230,120,0.75)); } } @media (max-width: 640px) { .pricing-cards { grid-template-columns: 1fr; } .pricing-footer-pills { grid-template-columns: 1fr 1fr; } h1 { font-size: 30px; } .pricing-price { font-size: 42px; } } @media (max-width: 400px) { .pricing-footer-pills { grid-template-columns: 1fr; } } /* ══════════════════════════════════════════ EYP — EXPAND YOUR PROTECTION SECTION ══════════════════════════════════════════ */ #eyp-section { background: var(--eyp-bg); padding: 90px 20px 100px; position: relative; overflow: hidden; font-family: 'Sora', sans-serif; transition: background var(--transition); } /* BG Grid */ .eyp-bg-grid { position: absolute; inset: 0; pointer-events: none; z-index: 0; background-image: linear-gradient(var(--eyp-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--eyp-grid-line) 1px, transparent 1px); background-size: 44px 44px; } /* Circuit / scanline ambiance */ .eyp-scanline { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; } .eyp-scanline::after { content: ''; position: absolute; left: 0; right: 0; height: 60px; background: linear-gradient(transparent, rgba(0,200,255,0.035), transparent); animation: eypScanMove 10s linear infinite; } @keyframes eypScanMove { 0% { top: -60px; } 100% { top: 100%; } } /* Ambient blobs */ .eyp-blob { position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; z-index: 0; } .eyp-blob--tl { width: 400px; height: 400px; top: -100px; left: -80px; background: radial-gradient(circle, rgba(74,174,255,0.09), transparent 65%); } .eyp-blob--br { width: 380px; height: 380px; bottom: -80px; right: -60px; background: radial-gradient(circle, rgba(74,222,128,0.08), transparent 65%); } /* Floating particles */ .eyp-particle { position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; } /* ── Inner ── */ .eyp-inner { max-width: 1280px; margin: 0 auto; position: relative; z-index: 2; } /* ── Header ── */ .eyp-header { text-align: center; margin-bottom: 40px; } .eyp-shield-icon { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 50%; background: rgba(74,222,128,0.10); border: 1.5px solid rgba(74,222,128,0.4); margin-bottom: 20px; animation: eypShieldPulse 3s ease-in-out infinite; box-shadow: 0 0 24px rgba(74,222,128,0.2); } body.light-mode .eyp-shield-icon { background: rgba(0,160,70,0.08); border-color: rgba(0,160,70,0.3); } @keyframes eypShieldPulse { 0%,100% { transform: scale(1); box-shadow: 0 0 24px rgba(74,222,128,0.2); } 50% { transform: scale(1.07); box-shadow: 0 0 40px rgba(74,222,128,0.38); } } .eyp-h1 { font-size: clamp(30px,5vw,58px); font-weight: 600; letter-spacing: -0.025em; line-height: 1.08; color: var(--eyp-title-color); margin-bottom: 12px; transition: color var(--transition); } .eyp-h1 .eyp-accent { color: var(--accent-green); } body.light-mode .eyp-h1 .eyp-accent { color: #009944; } .eyp-sub { font-size: clamp(14px,1.4vw,17px); color: var(--eyp-desc-color); line-height: 1.65; max-width: 680px; margin: 0 auto 22px; font-family: 'Inter', sans-serif; font-weight: 400; transition: color var(--transition); } /* Subscriber savings pill */ .eyp-savings-pill { display: inline-flex; align-items: center; gap: 10px; background: var(--eyp-pill-bg); border: 1.5px solid var(--eyp-pill-border); border-radius: 50px; padding: 10px 22px; font-size: 15px; font-weight: 600; color: var(--eyp-desc-color); letter-spacing: 0.01em; transition: all var(--transition); animation: eypPillGlow 3s ease-in-out infinite; } body.light-mode .eyp-savings-pill { color: rgba(10,22,40,0.75); } .eyp-savings-pill .eyp-pct { color: var(--accent-green); font-weight: 800; font-size: 17px; } body.light-mode .eyp-savings-pill .eyp-pct { color: #009944; } .eyp-pill-icon { width: 30px; height: 30px; border-radius: 50%; background: rgba(253,176,34,0.12); border: 1.5px solid rgba(253,176,34,0.4); display: flex; align-items: center; justify-content: center; color: var(--accent-yellow); font-size: 14px; flex-shrink: 0; } @keyframes eypPillGlow { 0%,100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); } 50% { box-shadow: 0 0 20px rgba(74,222,128,0.18); } } /* ── Main Grid: 2 top panels + 3 bottom panels ── */ .eyp-top-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; } .eyp-bottom-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; } /* ── Panel base ── */ .eyp-panel { background: var(--eyp-panel); border: 1.5px solid var(--eyp-panel-border); border-radius: 14px; overflow: hidden; position: relative; transition: all var(--transition); backdrop-filter: blur(10px); /* reveal animation */ opacity: 0; transform: translateY(28px); } .eyp-panel.eyp-visible { opacity: 1; transform: translateY(0); transition: opacity .65s ease, transform .65s ease, box-shadow var(--transition), border-color var(--transition); } .eyp-panel:hover { border-color: rgba(74,174,255,0.5); box-shadow: 0 20px 55px rgba(0,100,200,0.18); } .eyp-panel--green:hover { border-color: rgba(74,222,128,0.5); box-shadow: 0 20px 55px rgba(74,222,128,0.14); } /* Top glow stripe */ .eyp-topglow { position: absolute; top: 0; left: 14px; right: 14px; height: 2px; border-radius: 0 0 2px 2px; transition: opacity .3s; } .eyp-panel--blue .eyp-topglow { background: linear-gradient(90deg, transparent, #4aaeff 40%, #00cfff 60%, transparent); box-shadow: 0 0 12px rgba(74,174,255,0.6); } .eyp-panel--green .eyp-topglow { background: linear-gradient(90deg, transparent, #4ADE80 40%, #00ff88 60%, transparent); box-shadow: 0 0 12px rgba(74,222,128,0.6); } /* Scan line on hover */ .eyp-scan { position: absolute; left: 0; right: 0; height: 1.5px; top: 0; pointer-events: none; opacity: 0; transition: opacity .3s; } .eyp-panel--blue .eyp-scan { background: linear-gradient(90deg, transparent, #4aaeff, transparent); } .eyp-panel--green .eyp-scan { background: linear-gradient(90deg, transparent, #4ADE80, transparent); } .eyp-panel:hover .eyp-scan { opacity: 0.5; animation: eypScan 1.5s linear infinite; } @keyframes eypScan { 0% { top: 0; } 100% { top: 100%; } } /* ── Panel Header ── */ .eyp-panel-head { display: flex; align-items: flex-start; gap: 16px; padding: 22px 22px 16px; border-bottom: 1px solid rgba(255,255,255,0.07); } body.light-mode .eyp-panel-head { border-bottom-color: rgba(0,0,0,0.07); } .eyp-panel-icon { width: 54px; height: 54px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 22px; position: relative; overflow: hidden; transition: transform .3s; } .eyp-panel:hover .eyp-panel-icon { transform: scale(1.06); } .eyp-panel-icon--blue { background: rgba(74,174,255,0.10); border: 1.5px solid rgba(74,174,255,0.35); color: #4aaeff; } .eyp-panel-icon--green { background: rgba(74,222,128,0.10); border: 1.5px solid rgba(74,222,128,0.35); color: #4ADE80; } .eyp-panel-icon--yellow { background: rgba(253,176,34,0.10); border: 1.5px solid rgba(253,176,34,0.35); color: var(--accent-yellow); } .eyp-panel-icon--purple { background: rgba(170,90,255,0.10); border: 1.5px solid rgba(170,90,255,0.35); color: #aa5aff; } .eyp-panel-title { font-family: 'Sora', sans-serif; font-size: clamp(16px, 1.5vw, 21px); font-weight: 700; color: var(--eyp-title-color); margin-bottom: 5px; transition: color var(--transition); } .eyp-panel-desc { font-family: 'Inter', sans-serif; font-size: 13px; color: var(--eyp-desc-color); line-height: 1.6; transition: color var(--transition); } /* ── Data Table ── */ .eyp-table { width: 100%; border-collapse: collapse; font-family: 'Sora', sans-serif; } .eyp-table thead tr { background: var(--eyp-table-head-bg); } .eyp-table thead th { padding: 10px 14px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(200,220,255,0.5); text-align: left; border-bottom: 1px solid rgba(255,255,255,0.06); } body.light-mode .eyp-table thead th { color: rgba(10,22,40,0.45); border-bottom-color: rgba(0,0,0,0.07); } .eyp-table thead th.eyp-th-sub { color: var(--eyp-sub-color); text-align: right; } .eyp-table thead th.eyp-th-nonsub { color: var(--eyp-nonsub-color); text-align: right; } .eyp-table tbody tr { transition: background .25s; } .eyp-table tbody tr:nth-child(odd) { background: var(--eyp-table-row-bg); } .eyp-table tbody tr:nth-child(even) { background: var(--eyp-table-row-alt); } .eyp-table tbody tr:hover { background: rgba(74,174,255,0.05); } .eyp-table tbody td { padding: 11px 14px; font-size: 14px; color: var(--text-primary); border-bottom: 1px solid rgba(255,255,255,0.04); vertical-align: middle; transition: color var(--transition); } body.light-mode .eyp-table tbody td { color: #0a1628; border-bottom-color: rgba(0,0,0,0.05); } .eyp-table tbody tr:last-child td { border-bottom: none; } .eyp-td-label { display: flex; align-items: center; gap: 10px; font-weight: 500; } .eyp-td-icon { width: 26px; height: 26px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; } .eyp-td-icon--blue { background: rgba(74,174,255,0.10); border: 1px solid rgba(74,174,255,0.22); color: #4aaeff; } .eyp-td-icon--green { background: rgba(74,222,128,0.10); border: 1px solid rgba(74,222,128,0.22); color: #4ADE80; } .eyp-td-icon--yellow { background: rgba(253,176,34,0.10); border: 1px solid rgba(253,176,34,0.22); color: var(--accent-yellow); } .eyp-td-icon--purple { background: rgba(170,90,255,0.10); border: 1px solid rgba(170,90,255,0.22); color: #aa5aff; } .eyp-td-sub { font-weight: 700; color: var(--eyp-sub-color) !important; text-align: right; font-size: 15px !important; white-space: nowrap; } .eyp-td-nonsub { font-weight: 600; color: var(--eyp-nonsub-color) !important; text-align: right; font-size: 15px !important; white-space: nowrap; } /* Section divider row inside table */ .eyp-tier-row td { padding: 8px 14px 6px !important; font-size: 11px !important; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(200,220,255,0.4) !important; background: rgba(0,0,0,0.1) !important; border-top: 1px solid rgba(255,255,255,0.06); } body.light-mode .eyp-tier-row td { color: rgba(10,22,40,0.35) !important; background: rgba(0,0,0,0.04) !important; border-top-color: rgba(0,0,0,0.06); } /* Tier sub/non-sub header cells */ .eyp-tier-sub { color: var(--eyp-sub-color) !important; text-align: right; } .eyp-tier-nonsub { color: var(--eyp-nonsub-color) !important; text-align: right; } /* ── Subscriber Advantage badge (bottom of panel) ── */ .eyp-advantage { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--eyp-badge-bg); border-top: 1px solid var(--eyp-badge-border); font-family: 'Sora', sans-serif; font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.7); transition: background var(--transition), border-color var(--transition), color var(--transition); } body.light-mode .eyp-advantage { color: rgba(10,22,40,0.65); background: rgba(0,160,70,0.07); border-top-color: rgba(0,160,70,0.3); } .eyp-advantage-icon { width: 28px; height: 28px; border-radius: 50%; background: rgba(253,176,34,0.12); border: 1.5px solid rgba(253,176,34,0.4); display: flex; align-items: center; justify-content: center; color: var(--accent-yellow); font-size: 13px; flex-shrink: 0; animation: eypStarSpin 6s linear infinite; } @keyframes eypStarSpin { 0% { box-shadow: 0 0 0 0 rgba(253,176,34,0); } 50% { box-shadow: 0 0 12px rgba(253,176,34,0.35); } 100% { box-shadow: 0 0 0 0 rgba(253,176,34,0); } } .eyp-advantage strong { color: var(--eyp-sub-color); font-weight: 700; } body.light-mode .eyp-advantage strong { color: #009944; } .eyp-advantage .eyp-adv-pct { color: var(--eyp-sub-color); font-weight: 800; } body.light-mode .eyp-advantage .eyp-adv-pct { color: #009944; } /* ── Bottom panels ── */ /* Endpoint & API — same table style */ .eyp-panel-sm .eyp-panel-head { padding: 18px 18px 14px; gap: 12px; } .eyp-panel-sm .eyp-panel-icon { width: 48px; height: 48px; font-size: 19px; } .eyp-panel-sm .eyp-panel-title { font-size: 16px; } /* "Why Subscription" panel */ .eyp-why { background: var(--eyp-why-bg); border: 1.5px solid var(--eyp-why-border); border-radius: 14px; overflow: hidden; position: relative; transition: all var(--transition); backdrop-filter: blur(10px); opacity: 0; transform: translateY(28px); } .eyp-why.eyp-visible { opacity: 1; transform: translateY(0); transition: opacity .65s ease .45s, transform .65s ease .45s, box-shadow var(--transition); } .eyp-why:hover { box-shadow: 0 20px 50px rgba(74,222,128,0.12); border-color: rgba(74,222,128,0.55); } .eyp-why-head { display: flex; align-items: center; gap: 14px; padding: 22px 20px 16px; border-bottom: 1px solid rgba(255,255,255,0.07); } body.light-mode .eyp-why-head { border-bottom-color: rgba(0,0,0,0.07); } .eyp-why-icon { width: 54px; height: 54px; border-radius: 12px; background: rgba(74,222,128,0.10); border: 1.5px solid rgba(74,222,128,0.35); display: flex; align-items: center; justify-content: center; color: var(--accent-green); font-size: 22px; flex-shrink: 0; transition: transform .3s; } .eyp-why:hover .eyp-why-icon { transform: scale(1.06); } .eyp-why-title { font-family: 'Sora', sans-serif; font-size: 19px; font-weight: 700; color: var(--eyp-title-color); transition: color var(--transition); } .eyp-why-list { list-style: none; padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 14px; } .eyp-why-item { display: flex; align-items: flex-start; gap: 12px; font-family: 'Inter', sans-serif; font-size: 14px; color: var(--eyp-desc-color); line-height: 1.55; transition: color var(--transition); opacity: 0; transform: translateX(-12px); } .eyp-why-item.eyp-visible { opacity: 1; transform: translateX(0); transition: opacity .5s ease, transform .5s ease; } .eyp-why-check { width: 22px; height: 22px; border-radius: 50%; background: rgba(74,222,128,0.12); border: 1.5px solid rgba(74,222,128,0.4); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; transition: background var(--transition), box-shadow .3s; } .eyp-why-item:hover .eyp-why-check { background: rgba(74,222,128,0.22); box-shadow: 0 0 10px rgba(74,222,128,0.3); } .eyp-why-check i { font-size: 11px; color: var(--accent-green); } body.light-mode .eyp-why-check i { color: #009944; } /* ── Reveal animation ── */ .eyp-reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; } .eyp-reveal.eyp-up { opacity: 1; transform: translateY(0); } /* ── Responsive ── */ @media (max-width: 1024px) { .eyp-top-grid { grid-template-columns: 1fr; } .eyp-bottom-grid { grid-template-columns: 1fr 1fr; } .eyp-why { grid-column: span 2; } } @media (max-width: 700px) { #eyp-section { padding: 60px 16px 70px; } .eyp-bottom-grid { grid-template-columns: 1fr; } .eyp-why { grid-column: span 1; } .eyp-top-grid { gap: 14px; } .eyp-bottom-grid { gap: 14px; } .eyp-savings-pill { font-size: 13px; padding: 8px 16px; } .eyp-h1 { font-size: clamp(26px, 8vw, 40px); } } /* Light-mode overrides for panels */ body.light-mode .eyp-panel { border-color: rgba(0,100,210,0.2); } body.light-mode .eyp-panel:hover { border-color: rgba(0,100,210,0.45); box-shadow: 0 20px 50px rgba(0,80,200,0.1); } body.light-mode .eyp-panel--green:hover { border-color: rgba(0,160,70,0.45); box-shadow: 0 20px 50px rgba(0,140,60,0.1); } body.light-mode .eyp-why { border-color: rgba(0,160,70,0.25); } /* ══════════════════════════════════════ SCAN TYPES SECTION ══════════════════════════════════════ */ /*.scan-section { margin-top: 70px; padding: 20px 20px !important; border-top: 1px solid rgba(255,255,255,0.08); position: relative; z-index: 2; } body.light-mode .scan-section { border-top-color: rgba(0,0,0,0.10); } .scan-section-header { text-align: center; margin-bottom: 40px; } .scan-section-header h3 { font-family: 'Sora',sans-serif; font-size: clamp(22px,2.5vw,30px); font-weight: 700; margin-bottom: 10px; } .scan-section-header p { color: var(--text-muted); font-size: 15px; max-width: 600px; margin: auto; } .scan-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: 16px; margin-bottom: 50px; } .scan-card { background: var(--bg-card); border: 1px solid var(--border-card); border-radius: 12px; padding: 22px; transition: transform 0.28s ease,border-color 0.28s,box-shadow 0.28s,background var(--transition); position: relative; overflow: hidden; } .scan-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; border-radius: 12px 12px 0 0; } .scan-card.basic::after { background: linear-gradient(90deg,rgba(74,174,255,0.8),rgba(74,174,255,0.2)); } .scan-card.full::after { background: linear-gradient(90deg,rgba(74,222,128,0.8),rgba(74,222,128,0.2)); } .scan-card.external::after { background: linear-gradient(90deg,rgba(253,176,34,0.8),rgba(253,176,34,0.2)); } .scan-card.internal::after { background: linear-gradient(90deg,rgba(160,90,255,0.8),rgba(160,90,255,0.2)); } .scan-card:hover { transform: translateY(-5px); box-shadow: 0 16px 40px rgba(0,0,0,0.3); border-color: var(--border-hover); background: var(--bg-card-hover); } .scan-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; margin-bottom: 14px; } .scan-card.basic .scan-icon { background: rgba(74,174,255,0.15); border: 1px solid rgba(74,174,255,0.25); } .scan-card.full .scan-icon { background: rgba(74,222,128,0.15); border: 1px solid rgba(74,222,128,0.25); } .scan-card.external .scan-icon { background: rgba(253,176,34,0.15); border: 1px solid rgba(253,176,34,0.25); } .scan-card.internal .scan-icon { background: rgba(160,90,255,0.15); border: 1px solid rgba(160,90,255,0.25); } .scan-card h4 { font-family: 'Sora',sans-serif; font-size: 16px; font-weight: 600; margin-bottom: 6px; color: var(--text-primary); } .scan-card p { font-size: 13px; color: var(--text-muted); line-height: 1.6; } .scan-type-badge { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding: 2px 9px; border-radius: 20px; margin-bottom: 10px; } .scan-card.basic .scan-type-badge { background: rgba(74,174,255,0.15); color: #80c8ff; } .scan-card.full .scan-type-badge { background: rgba(74,222,128,0.15); color: var(--accent-green); } .scan-card.external .scan-type-badge { background: rgba(253,176,34,0.15); color: var(--accent-yellow); } .scan-card.internal .scan-type-badge { background: rgba(160,90,255,0.15); color: #c0a0ff; }*/ /* ══════════════════════════════════════ COMPLIANCE ADD-ONS ══════════════════════════════════════ */ /*.compliance-strip { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.10); border-radius: 14px; padding: 0px 36px; display: flex; align-items: center; gap: 40px; flex-wrap: wrap;*/ /*margin-bottom: 50px;*/ /*transition: background var(--transition),border-color var(--transition); } body.light-mode .compliance-strip { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.10); } .compliance-left { flex: 1; min-width: 220px; } .compliance-left h4 { font-family: 'Sora',sans-serif; font-size: 18px; font-weight: 700; margin-bottom: 6px; } .compliance-left p { font-size: 14px; color: var(--text-muted); line-height: 1.6; } .compliance-badges { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .comp-badge { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.15); color: var(--text-muted); font-size: 13px; font-weight: 600; padding: 8px 16px; border-radius: 8px; transition: background 0.25s,border-color 0.25s,color 0.25s,transform 0.2s; cursor: default; } .comp-badge:hover { background: rgba(74,222,128,0.12); border-color: rgba(74,222,128,0.35); color: var(--accent-green); transform: translateY(-2px); } body.light-mode .comp-badge { background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.12); color: rgba(10,22,40,0.7); } body.light-mode .comp-badge:hover { background: rgba(74,222,128,0.10); border-color: rgba(74,222,128,0.30); color: #1a8c40; }*/ /* ══════════════════════════════════════ PRICING FOOTER ══════════════════════════════════════ */ /*.pricing-footer { text-align: center; margin-top: 50px; position: relative; z-index: 2; } .pricing-footer p { color: var(--text-muted); font-size: 15px; margin-bottom: 8px; } .guarantee { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-dim); margin-top: 8px; } .guarantee i { color: var(--accent-green); } .customize-note { margin-top: 20px; display: inline-block; background: rgba(74,222,128,0.08); border: 1px solid rgba(74,222,128,0.20); color: var(--accent-green); font-size: 13px; padding: 10px 22px; border-radius: 30px; } body.light-mode .customize-note { background: rgba(74,222,128,0.10); color: #1a8c40; }*/ /* ══════════════════════════════════════ RESPONSIVE ══════════════════════════════════════ */ /*@media(max-width:1024px) { .pricing-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; } .pricing-card.popular { transform: scale(1); } .pricing-card.popular:hover { transform: translateY(-6px) !important; } .compliance-strip { flex-direction: column; gap: 20px; padding: 24px; } } @media(max-width:768px) { .pricing-section { padding: 70px 16px; } .pricing-header { margin-bottom: 40px; } .scan-grid { grid-template-columns: 1fr; } .billing-toggle { margin-bottom: 30px; } }*/ /* ============================================= CTA SECTION ============================================= */ .cta-section { padding: 100px 20px; background: linear-gradient(to bottom, #0a1628, #0d1e35); transition: background var(--transition); } body.light-mode .cta-section { background: linear-gradient(to bottom, #f0f4f8, #e8eef5); } body.light-mode .cta-card { background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(240,244,248,0.95)); border-color: rgba(74,222,128,0.3); } body.light-mode .cta-card h2 { color: #0a1628; } body.light-mode .subtext { color: rgba(10,22,40,0.65); } body.light-mode .features .feature { color: rgba(10,22,40,0.80); } body.light-mode .contact { color: rgba(10,22,40,0.45); } body.light-mode .btn-secondary { border-color: rgba(10,22,40,0.3); color: #0a1628; } body.light-mode .btn-secondary:hover { background: rgba(10,22,40,0.08); border-color: rgba(10,22,40,0.5); } body.light-mode .icon-box { background: rgba(74,222,128,0.15); border-color: rgba(74,222,128,0.35); } .cta-container { max-width: 1200px; margin: auto; } .cta-card { background: linear-gradient(135deg, #1a3a5ccc, #0f2847cc, #0a1628cc); border: 1px solid rgba(74,222,128,0.2); border-radius: 5px; padding: clamp(40px, 5vw, 70px) 40px; text-align: center; backdrop-filter: blur(6px); transition: background var(--transition), border-color var(--transition); } .icon-box { width: 60px; height: 60px; margin: auto; background: #22c55e; /* flat green (not gradient) */ border: 1px solid rgba(74,222,128,0.3); border-radius: 5px; display: flex; align-items: center; justify-content: center; color: var(--accent-green); margin-bottom: 25px; transition: transform 0.3s; } .icon-box svg { width: 22px; height: 22px; stroke: #0b1f33; /* dark icon like image */ stroke-width: 2; } .cta-card:hover .icon-box { transform: scale(1.1); } .cta-card h2 { font-family: 'Sora', sans-serif; font-size: clamp(26px, 3.5vw, 40px); color: white; margin-bottom: 15px; } .subtext { max-width: 700px; margin: 0 auto 35px; color: rgba(255,255,255,0.7); font-size: clamp(15px, 1.4vw, 18px); line-height: 1.6; } .features { display: flex; justify-content: center; flex-wrap: wrap; gap: 30px; margin-bottom: 40px; } .feature { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,0.8); font-size: 15px; } .check { color: var(--accent-green); font-weight: bold; } .cta-buttons { display: flex; justify-content: center; gap: 15px; flex-wrap: wrap; } .btn-secondary { background: transparent; border: 2px solid rgba(255,255,255,0.3); color: white; padding: 14px 30px; border-radius: 5px; cursor: pointer; transition: background 0.3s, border-color 0.3s, transform 0.2s; } .btn-secondary:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.4); transform: translateY(-2px); } .contact { margin-top: 35px; font-size: 13px; color: rgba(255,255,255,0.5); } /* ============================================= FOOTER ============================================= */ .footer { background: linear-gradient(to bottom, #0a1628, #0d1e35); padding: 80px 20px 50px; border-top: 1px solid rgba(255,255,255,0.08); color: white; transition: background var(--transition), border-color var(--transition); } body.light-mode .footer { background: linear-gradient(to bottom, #e0e8f3, #d8e4f0); border-top-color: rgba(0,0,0,0.08); } body.light-mode .logo { color: #0a1628; } body.light-mode .footer-about p { color: rgba(10,22,40,0.6); } body.light-mode .badge { background: rgba(74,222,128,0.12); border-color: rgba(74,222,128,0.25); } body.light-mode .footer-links h3, body.light-mode .footer-contact h3 { color: #0a1628; } body.light-mode .footer-links a { color: rgba(10,22,40,0.6); } body.light-mode .footer-links a:hover { color: #0a1628; } body.light-mode .footer-contact p { color: rgba(10,22,40,0.6); } body.light-mode .footer-contact a { color: rgba(10,22,40,0.6); } body.light-mode .footer-contact a:hover { color: #0a1628; } body.light-mode .footer-bottom p { color: rgba(10,22,40,0.4); } body.light-mode .footer-policy a { color: rgba(10,22,40,0.4); } body.light-mode .footer-policy a:hover { color: #0a1628; } body.light-mode .footer-bottom { border-top-color: rgba(0,0,0,0.08); } .footer-container { max-width: 1200px; margin: auto; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 2fr; gap: 60px; margin-top: 50px; margin-bottom: 60px; } .logo { display: flex; align-items: center; gap: 10px; font-family: 'Sora', sans-serif; font-weight: 600; font-size: 20px; margin-bottom: 20px; color: white; } .logo svg { color: var(--accent-green); } .footer-about p { color: rgba(255,255,255,0.6); line-height: 1.6; font-size: 15px; margin-bottom: 25px; } .badge { display: inline-block; padding: 6px 12px; border-radius: 5px; background: rgba(74,222,128,0.1); border: 1px solid rgba(74,222,128,0.2); color: var(--accent-green); font-size: 13px; } .footer-links h3, .footer-contact h3 { font-size: 16px; margin-bottom: 18px; } .footer-links ul { list-style: none; padding: 0; margin: 0; } .footer-links li { margin-bottom: 12px; } .footer-links a { color: rgba(255,255,255,0.6); text-decoration: none; font-size: 14px; transition: color 0.3s; } .footer-links a:hover { color: white; } .footer-contact p { color: rgba(255,255,255,0.6); font-size: 14px; margin-bottom: 14px; line-height: 1.6; } .footer-contact a { color: rgba(255,255,255,0.6); font-size: 14px; margin-bottom: 14px; line-height: 1.6; text-decoration:none; } .footer-contact i { color: var(--accent-green); margin-right: 10px; } .footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); padding-top: 25px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; } .footer-bottom p { color: rgba(255,255,255,0.4); font-size: 12px; } .footer-policy { display: flex; gap: 30px; flex-wrap: wrap; } .footer-policy a { color: rgba(255,255,255,0.4); font-size: 12px; text-decoration: none; transition: color 0.3s; } .footer-policy a:hover { color: white; } /* ============================================= COUNTER ANIMATION ============================================= */ .counter-num { display: inline-block; transition: transform 0.3s; } /* ============================================= RESPONSIVE — TABLET (max 1024px) ============================================= */ @media (max-width: 1100px) { .navbar { padding: 14px 24px; } .navbar.scrolled { padding: 10px 24px; } .hero-text { padding-left: 20px; } .videocontainer { padding: 0 24px; gap: 40px; } .features-grid { grid-template-columns: repeat(2, 1fr); } .sn-grid { gap: 40px; } .testimonial-grid { grid-template-columns: repeat(2, 1fr); } .pricing-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; } .popular { transform: scale(1); } .popular:hover { transform: translateY(-5px) !important; } .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; } } /* ============================================= RESPONSIVE — MOBILE (max 768px) ============================================= */ @media (max-width: 768px) { body { padding-top: 70px; } .navbar { padding: 12px 16px; } .navbar.scrolled { padding: 8px 16px; } .hero-slide { padding-top: 90px; min-height: 100svh; } .hero-text { padding-left: 0; padding: 0 16px; } .slide-title { font-size: clamp(26px, 7vw, 40px); } .hero-buttons .btn { padding: 10px 18px; font-size: 14px; } .videocontainer { flex-direction: column; gap: 40px; padding: 0 20px; } .left-content, .right-video { width: 100%; flex: none; } .features-grid { grid-template-columns: 1fr; } .section-header { margin-bottom: 40px; } .ycards { flex-direction: column; } .ycard { min-width: 100%; } .sn-section { padding: 50px 16px; } .sn-grid { grid-template-columns: 1fr; gap: 40px; } .sn-radar-wrap { max-width: 300px; margin: 0 auto; } .sn-status-bar { gap: 10px; flex-direction: column; align-items: flex-start; } .testimonial-grid { grid-template-columns: 1fr; } .tsection-header h2 { font-size: clamp(22px, 6vw, 32px); } .tstats { gap: 20px; justify-content: center; text-align: center; } .pricing-grid { max-width: 100%; } .features { flex-direction: column; align-items: center; gap: 15px; } .cta-buttons { flex-direction: column; align-items: center; } .footer-grid { grid-template-columns: 1fr; gap: 32px; } .footer-bottom { flex-direction: column; text-align: center; } .footer-policy { justify-content: center; } } /* ============================================= RESPONSIVE — SMALL MOBILE (max 480px) ============================================= */ @media (max-width: 480px) { .slide-title { font-size: clamp(22px, 8vw, 32px); } .pricing-card { padding: 30px 20px; } .cta-card { padding: 40px 20px; } .testimonial-card { padding: 22px; } .play-btn { width: 60px; height: 60px; font-size: 22px; } } /* ═══════════════════════════════════════════ SHARED UTILITIES - ALL DOWN SECTION ═══════════════════════════════════════════ */ .section-wrap { padding: 100px 20px; position: relative; overflow: hidden } .inner { max-width: 1280px; margin: 0 auto; position: relative; z-index: 2 } .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--green2); margin-bottom: 18px; } .eyebrow::before, .eyebrow::after { content: ''; width: 28px; height: 1px; background: var(--green2); opacity: .6 } .section-title { font-family: 'Sora',sans-serif; font-size: clamp(30px,4.5vw,56px); font-weight: 800; line-height: 1.08; letter-spacing: -.025em; color: var(--txt); margin-bottom: 16px; } .section-title .accent { color: var(--green2) } .section-sub { font-size: clamp(14px,1.4vw,18px); color: var(--txt2); line-height: 1.65; max-width: 660px; margin: 0 auto; } .card-base { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; backdrop-filter: blur(12px); transition: all .35s ease; } .card-base:hover { border-color: var(--border2); box-shadow: var(--shadow) } .green-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green2); box-shadow: 0 0 8px var(--green2); flex-shrink: 0 } .badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 20px; font-size: 11px; font-weight: 600; letter-spacing: .06em; } .badge-green { background: rgba(74,222,128,.12); color: var(--green2); border: 1px solid rgba(74,222,128,.25) } .badge-red { background: rgba(255,71,87,.12); color: #ff4757; border: 1px solid rgba(255,71,87,.25) } .badge-orange { background: rgba(255,107,53,.12); color: #ff6b35; border: 1px solid rgba(255,107,53,.25) } .badge-yellow { background: rgba(255,214,0,.12); color: #ffd600; border: 1px solid rgba(255,214,0,.25) } /* scroll reveal */ .reveal { opacity: 0; transform: translateY(32px); transition: opacity .7s ease,transform .7s ease } .reveal.up { opacity: 1; transform: translateY(0) } .reveal-l { opacity: 0; transform: translateX(-32px); transition: opacity .7s ease,transform .7s ease } .reveal-l.up { opacity: 1; transform: translateX(0) } .reveal-r { opacity: 0; transform: translateX(32px); transition: opacity .7s ease,transform .7s ease } .reveal-r.up { opacity: 1; transform: translateX(0) } /* ambient glow */ .glow-blob { position: absolute; border-radius: 50%; filter: blur(100px); pointer-events: none; } /* ═══════════════════════════════════════════════════════════════ EXPERT TEAM SECTION — namespace: et- Piggybacks on your existing :root, body.light-mode, fonts ═══════════════════════════════════════════════════════════════ */ /* ── Section shell ── */ #expert-team { background: linear-gradient(180deg, #020c18 0%, #040f1d 100%); padding: 90px 20px 0; position: relative; overflow: visible; font-family: 'Inter', sans-serif; transition: background var(--transition, .3s ease); } body.light-mode #expert-team { background: linear-gradient(180deg, #ddeeff 0%, #ccd8ee 100%); } /* ── Starfield / particle bg ── */ .et-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; } .et-dot { position: absolute; border-radius: 50%; background: #4aaeff; opacity: 0; animation: etDotFloat var(--dur, 5s) var(--del, 0s) ease-in-out infinite alternate; } .et-dot--g { background: #4ADE80; } @keyframes etDotFloat { from { opacity: var(--op, .4); transform: translateY(0) scale(1); } to { opacity: calc(var(--op, .4) * .25); transform: translateY(-18px) scale(1.5); } } /* ── Ambient glow blobs ── */ .et-blob { position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; } .et-blob--blue { width: 420px; height: 420px; left: -80px; top: 0; background: radial-gradient(circle, rgba(74,174,255,.10), transparent 65%); } .et-blob--green { width: 380px; height: 380px; right: -60px; top: 5%; background: radial-gradient(circle, rgba(74,222,128,.09), transparent 65%); } /* Grid overlay */ .et-grid { position: absolute; inset: 0; pointer-events: none; z-index: 0; background-image: linear-gradient(rgba(0,180,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(0,180,255,.04) 1px, transparent 1px); background-size: 50px 50px; } body.light-mode .et-grid { background-image: linear-gradient(rgba(0,100,200,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(0,100,200,.06) 1px, transparent 1px); } /* ── Inner wrapper ── */ .et-inner { max-width: 1200px; margin: 0 auto; position: relative; z-index: 2; } /* ── Header ── */ .et-header { text-align: center; margin-bottom: 52px; } .et-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(200,220,255,.5); margin-bottom: 18px; transition: color var(--transition, .3s ease); } body.light-mode .et-eyebrow { color: rgba(20,60,100,.5); } .et-eyebrow::before, .et-eyebrow::after { content: ''; width: 36px; height: 1px; background: linear-gradient(90deg, transparent, rgba(0,200,255,.45)); } .et-eyebrow::after { background: linear-gradient(90deg, rgba(0,200,255,.45), transparent); } .et-header h2 { font-family: 'Sora', sans-serif; font-size: clamp(1.8rem, 4.5vw, 3rem); font-weight: 800; line-height: 1.1; letter-spacing: -.025em; color: #fff; margin: 0 0 12px; transition: color var(--transition, .3s ease); } body.light-mode .et-header h2 { color: #0a1628; } .et-header h2 .et-hl { color: var(--accent-green, #4ADE80); } body.light-mode .et-header h2 .et-hl { color: #009944; } .et-sub { font-size: clamp(.88rem, 1.3vw, 1.05rem); color: rgba(200,220,255,.55); font-weight: 400; letter-spacing: .04em; margin: 0; transition: color var(--transition, .3s ease); } body.light-mode .et-sub { color: rgba(20,60,100,.5); } /* ── Cards grid ── */ .et-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } @media (max-width: 860px) { .et-cards { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .et-cards { grid-template-columns: 1fr; } } /* ── Individual card ── */ .et-card { border-radius: 16px; overflow:visible; position: relative; display: flex; flex-direction: column; cursor: pointer; transition: all var(--transition, .3s ease); opacity: 0; transform: translateY(32px); border: 1px solid rgba(0,180,255,.18); background: linear-gradient(160deg, #071828 0%, #040f1d 100%); box-shadow: 0 4px 30px rgba(0,0,0,.3), inset 0 1px 0 rgba(0,180,255,.08); } .et-card.et-visible { opacity: 1; transform: translateY(0); transition: opacity .65s ease, transform .65s ease, box-shadow .3s ease, border-color .3s ease, background .3s ease; } .et-card:hover { transform: translateY(-7px) scale(1.012); box-shadow: 0 20px 55px rgba(0,0,0,.4); } /* Active / featured card — green border (matches Threat Hunter in image) */ .et-card.et-active { border-color: rgba(74,222,128,.55); box-shadow: 0 0 0 1px rgba(74,222,128,.12), 0 20px 55px rgba(74,222,128,.12), inset 0 1px 0 rgba(74,222,128,.15); } .et-card.et-active:hover { box-shadow: 0 0 0 1px rgba(74,222,128,.2), 0 24px 65px rgba(74,222,128,.2); } .et-card:not(.et-active):hover { border-color: rgba(0,200,255,.45); box-shadow: 0 20px 55px rgba(0,180,255,.14); } body.light-mode .et-card { background: linear-gradient(160deg, #eaf4ff 0%, #d6ecff 100%); border-color: rgba(0,120,220,.22); box-shadow: 0 4px 24px rgba(0,100,200,.09); } body.light-mode .et-card.et-active { background: linear-gradient(160deg, #e6f9ee 0%, #d4f0e0 100%); border-color: rgba(0,160,70,.45); } /* ── Top glow stripe ── */ .et-topglow { position: absolute; top: 0; left: 14px; right: 14px; height: 2px; border-radius: 0 0 2px 2px; background: linear-gradient(90deg, transparent, #00cfff 40%, #4aaeff 60%, transparent); box-shadow: 0 0 12px 2px rgba(74,174,255,.5); transition: background .3s, box-shadow .3s; } .et-card.et-active .et-topglow { background: linear-gradient(90deg, transparent, #00ff88 40%, #4ADE80 60%, transparent); box-shadow: 0 0 12px 2px rgba(74,222,128,.55); } /* Scan line on hover */ .et-scan { position: absolute; left: 0; right: 0; height: 1.5px; top: 0; pointer-events: none; opacity: 0; background: linear-gradient(90deg, transparent, #00cfff, transparent); transition: opacity .3s; } .et-card.et-active .et-scan { background: linear-gradient(90deg, transparent, #4ADE80, transparent); } .et-card:hover .et-scan { opacity: .5; animation: etScan 1.4s linear infinite; } @keyframes etScan { 0% { top: 0; } 100% { top: 100%; } } /* Corner brackets */ .et-card::before, .et-card::after { content: ''; position: absolute; width: 11px; height: 11px; border-style: solid; overflow:visible; opacity: .4; transition: opacity .3s, border-color .3s; z-index: 5; } .et-card::before { top: 8px; left: 8px; border-width: 2px 0 0 2px; border-radius: 3px 0 0 0; border-color: #00cfff; } .et-card::after { bottom: 8px; right: 8px; border-width: 0 2px 2px 0; border-radius: 0 0 3px 0; border-color: #00cfff; } .et-card.et-active::before, .et-card.et-active::after { border-color: #4ADE80; } .et-card:hover::before, .et-card:hover::after { opacity: 1; } /* ── Image area ── */ .et-img-wrap { position: relative; width: 100%; height: 210px; overflow: hidden; flex-shrink: 0; background: linear-gradient(135deg, #041020 0%, #081830 100%); } .et-img-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; transition: transform .5s ease, filter .3s ease; filter: brightness(.85) saturate(.9); } .et-card:hover .et-img-wrap img { transform: scale(1.04); filter: brightness(.95) saturate(1.05); } /* Silhouette placeholder (shown when no real image) */ .et-silhouette { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; } .et-silhouette svg { width: 170px; height: 180px; opacity: .55; transition: opacity .3s, transform .4s; } .et-card:hover .et-silhouette svg { opacity: .7; transform: scale(1.04); } /* Background scene inside image (grid / world map lines) */ .et-scene { position: absolute; inset: 0; pointer-events: none; } .et-scene--analyst { background: radial-gradient(ellipse at 30% 80%, rgba(0,160,255,.18), transparent 60%), radial-gradient(ellipse at 80% 20%, rgba(0,80,160,.2), transparent 60%); } .et-scene--hunter { background: radial-gradient(ellipse at 50% 60%, rgba(74,222,128,.18), transparent 55%), radial-gradient(ellipse at 20% 30%, rgba(0,120,60,.2), transparent 55%); } .et-scene--comp { background: radial-gradient(ellipse at 40% 70%, rgba(0,140,255,.15), transparent 55%), radial-gradient(ellipse at 70% 20%, rgba(0,60,140,.18), transparent 55%); } .et-scene--engineer { background: radial-gradient(ellipse at 60% 70%, rgba(74,174,255,.12), transparent 55%), radial-gradient(ellipse at 20% 30%, rgba(0,60,120,.18), transparent 55%); } /* Role icon circle at top */ .et-role-icon { position: absolute; top: -26px; left: 50%; overflow:visible!important; transform: translateX(-50%); width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(10, 20, 40, 0.9); border: 2px solid rgba(74, 174, 255, 0.6); box-shadow: 0 0 12px rgba(74,174,255,0.5), inset 0 0 10px rgba(74,174,255,0.2); z-index: 10; } .et-card.et-active .et-role-icon { border-color: #4ADE80; box-shadow: 0 0 16px rgba(74,222,128,0.7), inset 0 0 12px rgba(74,222,128,0.3); /*position: relative;*/ /*overflow: visible !important;*/ /* 🔥 IMPORTANT */ } .et-image::after { content: ""; position: absolute; inset: 0; background: rgba(0, 80, 160, 0.25); } .et-card.et-active .et-image::after { background: rgba(0, 150, 80, 0.35); } /*.et-role-icon { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 3; transition: transform .3s, box-shadow .3s; }*/ .et-card:not(.et-active) .et-role-icon { background: rgba(0,30,60,.8); border: 1.5px solid rgba(0,180,255,.45); box-shadow: 0 0 16px rgba(0,180,255,.2); } .et-card.et-active .et-role-icon { background: rgba(0,40,20,.85); border: 1.5px solid rgba(74,222,128,.55); box-shadow: 0 0 18px rgba(74,222,128,.3); } .et-card:hover .et-role-icon { transform: translateX(-50%) scale(1.1); } .et-role-icon svg { width: 24px; height: 24px; } /* Compliance badges overlay (card 3) */ .et-compliance { position: absolute; top: 64px; right: 10px; background: rgba(3,12,24,.88); border: 1px solid rgba(0,180,255,.2); border-radius: 8px; padding: 8px 12px; z-index: 4; backdrop-filter: blur(6px); } body.light-mode .et-compliance { background: rgba(240,248,255,.92); border-color: rgba(0,120,200,.2); } .et-comp-title { font-family: 'Sora', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(200,220,255,.6); margin-bottom: 6px; transition: color .3s; } body.light-mode .et-comp-title { color: rgba(20,60,100,.5); } .et-comp-item { display: flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 600; color: #4ADE80; margin-bottom: 4px; } .et-comp-item:last-child { margin-bottom: 0; } .et-comp-dot { width: 6px; height: 6px; border-radius: 50%; background: #4ADE80; box-shadow: 0 0 5px #4ADE80; flex-shrink: 0; } body.light-mode .et-comp-item { color: #009944; } body.light-mode .et-comp-dot { background: #009944; box-shadow: 0 0 5px #009944; } /* Gradient overlay on image bottom */ .et-img-fade { position: absolute; bottom: 0; left: 0; right: 0; height: 60%; background: linear-gradient(to top, #071828 0%, transparent 100%); z-index: 2; transition: background .3s; } .et-card.et-active .et-img-fade { background: linear-gradient(to top, #062012 0%, transparent 100%); } body.light-mode .et-img-fade { background: linear-gradient(to top, #eaf4ff 0%, transparent 100%); } body.light-mode .et-card.et-active .et-img-fade { background: linear-gradient(to top, #e6f9ee 0%, transparent 100%); } /* ── Card body ── */ .et-body { padding: 20px 20px 20px; display: flex; flex-direction: column; flex: 1; } .et-role-name { font-family: 'Sora', sans-serif; font-size: clamp(1rem, 1.5vw, 1.15rem); font-weight: 700; color: #fff; margin: 0 0 6px; transition: color .3s; } body.light-mode .et-role-name { color: #0a1628; } .et-divider { width: 32px; height: 2px; margin-bottom: 10px; border-radius: 2px; background: #4aaeff; transition: background .3s, width .3s; } .et-card.et-active .et-divider { background: #4ADE80; } .et-card:hover .et-divider { width: 48px; } .et-desc { font-size: .82rem; line-height: 1.6; color: rgba(180,210,255,.55); margin: 0 0 16px; flex: 1; transition: color .3s; } body.light-mode .et-desc { color: rgba(20,60,100,.55); } .et-card.et-active .et-desc { color: rgba(160,230,190,.55); } body.light-mode .et-card.et-active .et-desc { color: rgba(10,80,40,.55); } /* Learn more link */ .et-learn { display: inline-flex; align-items: center; gap: 7px; font-family: 'Sora', sans-serif; font-size: .82rem; font-weight: 700; color: #4aaeff; text-decoration: none; letter-spacing: .03em; transition: color .25s, gap .25s; } .et-card.et-active .et-learn { color: #4ADE80; } body.light-mode .et-learn { color: #0077cc; } body.light-mode .et-card.et-active .et-learn { color: #009944; } .et-learn:hover { gap: 12px; } .et-learn svg { transition: transform .25s; flex-shrink: 0; } .et-learn:hover svg { transform: translateX(4px); } /* ── Stats footer bar ── */ .et-stats { display: flex; align-items: center; background: rgba(255,255,255,.03); border-top: 1px solid rgba(255,255,255,.07); padding: 22px 24px; gap: 0; flex-wrap: wrap; margin-top: 24px; transition: background .3s, border-color .3s; } body.light-mode .et-stats { background: rgba(0,0,0,.04); border-top-color: rgba(0,0,0,.08); } .et-stat { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 180px; padding: 8px 20px; } .et-stat-icon { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .3s, border-color .3s; } .et-stat:nth-child(1) .et-stat-icon, .et-stat:nth-child(2) .et-stat-icon { background: rgba(74,222,128,.08); border: 1px solid rgba(74,222,128,.2); } .et-stat:nth-child(3) .et-stat-icon, .et-stat:nth-child(4) .et-stat-icon { background: rgba(74,222,128,.08); border: 1px solid rgba(74,222,128,.2); } .et-stat-icon svg { width: 22px; height: 22px; } .et-stat-title { font-family: 'Sora', sans-serif; font-size: 13px; font-weight: 700; color: #fff; margin-bottom: 3px; transition: color .3s; } body.light-mode .et-stat-title { color: #0a1628; } .et-stat-desc { font-size: 12px; color: rgba(200,220,255,.42); line-height: 1.4; transition: color .3s; } body.light-mode .et-stat-desc { color: rgba(20,60,100,.45); } .et-stat-sep { width: 1px; height: 46px; background: rgba(255,255,255,.07); flex-shrink: 0; transition: background .3s; } body.light-mode .et-stat-sep { background: rgba(0,0,0,.08); } /* ── Powered-by footer ── */ .et-footer { background: rgba(255,255,255,.03); border-top: 1px solid rgba(255,255,255,.07); padding: 13px 22px; display: flex; align-items: center; justify-content: center; gap: 7px; font-size: .78rem; color: rgba(200,220,255,.5); flex-wrap: wrap; transition: background .3s, border-color .3s, color .3s; } body.light-mode .et-footer { background: rgba(0,0,0,.04); border-top-color: rgba(0,0,0,.08); color: rgba(20,60,100,.5); } .et-footer .et-fn { color: #4aaeff; font-weight: 700; transition: color .3s; } .et-footer .et-fz { color: #4ADE80; font-weight: 700; transition: color .3s; } body.light-mode .et-footer .et-fn { color: #0077cc; } body.light-mode .et-footer .et-fz { color: #009944; } .et-footer svg { width: 20px; height: 20px; flex-shrink: 0; } /* ── Reveal helpers ── */ .et-reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; } .et-reveal.et-up { opacity: 1; transform: translateY(0); } /* ── Responsive ── */ @media (max-width: 860px) { .et-stats { flex-wrap: wrap; } .et-stat { min-width: calc(50% - 1px); } .et-stat-sep:nth-child(4) { display: none; } } @media (max-width: 480px) { #expert-team { padding: 60px 16px 0; } .et-stat { min-width: 100%; } .et-stat-sep { width: 100%; height: 1px; } .et-stats { padding: 16px; } } /*#team { background: linear-gradient(to bottom, #0a1628, #0d1e35); padding: 100px 20px; text-align: center; position: relative; overflow: hidden; color: white; font-family: 'Sora', sans-serif; transition: background var(--transition); } .team-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; margin: 56px 0 40px; } .team-card { background: var(--card); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; cursor: pointer; transition: all .4s cubic-bezier(.34,1.2,.64,1); text-align: left; position: relative; } .team-card:hover { transform: translateY(-8px); border-color: rgba(74,222,128,.35) } .team-card.active { border: 2px solid var(--green2); box-shadow: 0 0 30px rgba(74,222,128,.2) } .team-card-img { width: 100%; height: 220px; object-fit: cover; object-position: top; background: linear-gradient(135deg,#051525,#0a2040); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }*/ /* placeholder gradient when no img */ /*.team-card-img-placeholder { width: 100%; height: 220px; background: linear-gradient(135deg,#051525 0%,#0a2040 100%); position: relative; overflow: hidden; } .team-card-img-placeholder::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg,transparent 50%,rgba(4,17,31,.8)); } .team-role-icon { position: absolute; bottom: 16px; left: 16px; z-index: 2; width: 44px; height: 44px; border-radius: 10px; background: rgba(8,20,38,.85); border: 1px solid var(--border2); display: flex; align-items: center; justify-content: center; backdrop-filter: blur(8px); } .team-card-body { padding: 20px } .team-role { font-family: 'Sora',sans-serif; font-size: 18px; font-weight: 700; color: var(--txt); margin-bottom: 8px; } .team-divider { width: 32px; height: 2px; background: var(--green2); margin-bottom: 10px } .team-desc { font-size: 14px; color: var(--txt2); line-height: 1.55; margin-bottom: 16px } .team-learn { font-size: 14px; color: var(--green2); font-weight: 600; display: flex; align-items: center; gap: 6px } .team-learn svg { transition: transform .2s } .team-card:hover .team-learn svg { transform: translateX(4px) }*/ /* team stats bar */ /*.team-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .team-stat { padding: 20px 24px; display: flex; align-items: center; gap: 14px; border-right: 1px solid var(--border) } .team-stat:last-child { border-right: none } .team-stat-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: rgba(74,222,128,.08); border: 1px solid rgba(74,222,128,.18) } .team-stat-title { font-size: 13px; font-weight: 600; color: var(--txt); margin-bottom: 3px } .team-stat-desc { font-size: 12px; color: var(--txt3) }*/ /* ═══════════════════════════════════════════ ██ SECTION 3 — STATS / REAL RESULTS ═══════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════ PROTECTION STATS SECTION — namespace: pst- Piggybacks on your existing :root, body.light-mode, fonts ═══════════════════════════════════════════════════════════════ */ /* ── Section shell ── */ #protection-stats { background: linear-gradient(180deg, #0a1628 0%, #071120 100%); padding: 90px 20px 80px; position: relative; overflow: hidden; font-family: 'Inter', sans-serif; transition: background var(--transition, .3s ease); } body.light-mode #protection-stats { background: linear-gradient(180deg, #ddeeff 0%, #ccd8ee 100%); } /* ── BG grid ── */ .pst-grid-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; background-image: linear-gradient(rgba(0,180,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0,180,255,.05) 1px, transparent 1px); background-size: 50px 50px; transition: background-image var(--transition, .3s ease); } body.light-mode .pst-grid-bg { background-image: linear-gradient(rgba(0,100,200,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(0,100,200,.06) 1px, transparent 1px); } /* ── Ambient radials ── */ .pst-radial { position: absolute; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(ellipse 65% 45% at 8% 12%, rgba(0,160,255,.07) 0%, transparent 65%), radial-gradient(ellipse 50% 40% at 92% 88%, rgba(0,220,100,.06) 0%, transparent 65%); transition: background var(--transition, .3s ease); } body.light-mode .pst-radial { background: radial-gradient(ellipse 65% 45% at 8% 12%, rgba(0,120,255,.08) 0%, transparent 65%), radial-gradient(ellipse 50% 40% at 92% 88%, rgba(0,160,70,.07) 0%, transparent 65%); } /* ── Inner wrapper ── */ .pst-inner { max-width: 1200px; margin: 0 auto; position: relative; z-index: 2; } /* ── Header ── */ .pst-header { text-align: center; margin-bottom: 48px; } .pst-shield-row { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 18px; } .pst-hr { width: 55px; height: 1px; background: linear-gradient(90deg, transparent, rgba(0,200,255,.5)); transition: background var(--transition, .3s ease); } .pst-hr--r { background: linear-gradient(90deg, rgba(0,200,255,.5), transparent); } body.light-mode .pst-hr { background: linear-gradient(90deg, transparent, rgba(0,120,200,.4)); } body.light-mode .pst-hr--r { background: linear-gradient(90deg, rgba(0,120,200,.4), transparent); } .pst-header h2 { font-family: 'Sora', sans-serif; font-size: clamp(1.55rem, 4vw, 2.5rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; color: #fff; margin: 0 0 10px; transition: color var(--transition, .3s ease); } body.light-mode .pst-header h2 { color: #0a1628; } .pst-header h2 .pst-hl { color: var(--accent-green, #4ADE80); } body.light-mode .pst-header h2 .pst-hl { color: #009944; } .pst-sub { font-size: clamp(.85rem, 1.3vw, 1rem); font-weight: 400; letter-spacing: .05em; color: rgba(200,220,255,.55); margin: 0; transition: color var(--transition, .3s ease); } body.light-mode .pst-sub { color: rgba(20,60,100,.5); } /* ── Outer card container (matches your .tp2 card style) ── */ .pst-outer { background: rgba(5,15,30,.75); border: 1px solid rgba(0,180,255,.14); border-radius: 22px; padding: 32px 28px 0; backdrop-filter: blur(10px); box-shadow: 0 0 60px rgba(0,100,200,.1), 0 0 0 1px rgba(0,160,255,.06); position: relative; overflow: hidden; transition: background var(--transition, .3s ease), border-color var(--transition, .3s ease); } body.light-mode .pst-outer { background: rgba(255,255,255,.88); border-color: rgba(0,120,200,.18); box-shadow: 0 8px 40px rgba(0,100,200,.1); } /* inner circuit lines */ .pst-outer::before { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: 22px; background-image: repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(0,180,255,.04) 39px, rgba(0,180,255,.04) 40px), repeating-linear-gradient(90deg, transparent, transparent 79px, rgba(0,180,255,.04) 79px, rgba(0,180,255,.04) 80px); } /* ── 4-card grid ── */ .pst-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; text-align:center; } @media (max-width: 860px) { .pst-cards { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .pst-cards { grid-template-columns: 1fr; } } /* ── Individual card ── */ .pst-card { border-radius: 16px; padding: 24px 20px 18px; display: flex; flex-direction: column; position: relative; overflow: hidden; transition: all var(--transition, .3s ease); cursor: default; /* entrance — overridden by JS */ opacity: 0; transform: translateY(28px); } .pst-card.pst-visible { opacity: 1; transform: translateY(0); transition: opacity .65s ease, transform .65s ease, box-shadow var(--transition, .3s ease), border-color var(--transition, .3s ease), background var(--transition, .3s ease); } .pst-card:hover { transform: translateY(-5px) scale(1.015); } /* Blue cards (1 & 2) */ .pst-card--blue { background: linear-gradient(150deg, #071e38 0%, #040f1d 100%); border: 1px solid rgba(0,180,255,.3); box-shadow: 0 4px 28px rgba(0,160,255,.07), inset 0 1px 0 rgba(0,180,255,.1); } .pst-card--blue:hover { border-color: rgba(0,200,255,.6); box-shadow: 0 14px 50px rgba(0,180,255,.18), inset 0 1px 0 rgba(0,200,255,.2); } body.light-mode .pst-card--blue { background: linear-gradient(150deg, #eaf4ff 0%, #d6ecff 100%); border-color: rgba(0,120,220,.25); box-shadow: 0 4px 24px rgba(0,100,200,.08); } body.light-mode .pst-card--blue:hover { border-color: rgba(0,140,255,.55); box-shadow: 0 14px 40px rgba(0,120,200,.14); } /* Green cards (3 & 4) */ .pst-card--green { background: linear-gradient(150deg, #062012 0%, #040f1d 100%); border: 1px solid rgba(0,220,100,.32); box-shadow: 0 4px 28px rgba(0,200,80,.07), inset 0 1px 0 rgba(0,220,100,.1); } .pst-card--green:hover { border-color: rgba(0,240,110,.6); box-shadow: 0 14px 50px rgba(0,210,90,.18), inset 0 1px 0 rgba(0,230,110,.2); } body.light-mode .pst-card--green { background: linear-gradient(150deg, #e6f9ee 0%, #d4f0e0 100%); border-color: rgba(0,160,70,.28); box-shadow: 0 4px 24px rgba(0,140,60,.08); } body.light-mode .pst-card--green:hover { border-color: rgba(0,180,80,.55); box-shadow: 0 14px 40px rgba(0,150,65,.14); } /* Top glow stripe */ .pst-topglow { position: absolute; top: 0; left: 14px; right: 14px; height: 2px; border-radius: 0 0 2px 2px; } .pst-card--blue .pst-topglow { background: linear-gradient(90deg, transparent, #00cfff 40%, #4aaeff 60%, transparent); box-shadow: 0 0 12px 2px rgba(74,174,255,.55); } .pst-card--green .pst-topglow { background: linear-gradient(90deg, transparent, #00ff88 40%, #4ADE80 60%, transparent); box-shadow: 0 0 12px 2px rgba(74,222,128,.55); } /* Scan line on hover */ .pst-scan { position: absolute; left: 0; right: 0; height: 1.5px; top: 0; pointer-events: none; opacity: 0; transition: opacity .3s; } .pst-card--blue .pst-scan { background: linear-gradient(90deg, transparent, #00cfff, transparent); } .pst-card--green .pst-scan { background: linear-gradient(90deg, transparent, #4ADE80, transparent); } .pst-card:hover .pst-scan { opacity: .55; animation: pstScan 1.4s linear infinite; } @keyframes pstScan { 0% { top: 0; } 100% { top: 100%; } } /* Corner brackets */ .pst-card::before, .pst-card::after { content: ''; position: absolute; width: 11px; height: 11px; border-style: solid; opacity: .45; transition: opacity var(--transition, .3s ease), border-color var(--transition, .3s ease); } .pst-card::before { top: 8px; left: 8px; border-width: 2px 0 0 2px; border-radius: 3px 0 0 0; } .pst-card::after { bottom: 8px; right: 8px; border-width: 0 2px 2px 0; border-radius: 0 0 3px 0; } .pst-card--blue::before, .pst-card--blue::after { border-color: #00cfff; } .pst-card--green::before, .pst-card--green::after { border-color: #4ADE80; } .pst-card:hover::before, .pst-card:hover::after { opacity: 1; } /* ── Icon ring ── */ .pst-icon { width: 52px; height: 52px; border-radius: 50%; display: flex; position: relative; flex-shrink: 0; transition: all var(--transition, .3s ease); justify-content: center; align-items: center; margin: 0 auto; margin-bottom: 16px; } .pst-card--blue .pst-icon { background: rgba(0,140,255,.1); border: 1.5px solid rgba(0,180,255,.32); } .pst-card--green .pst-icon { background: rgba(0,200,80,.1); border: 1.5px solid rgba(0,220,100,.32); } .pst-card:hover .pst-icon { transform: scale(1.09); } .pst-card--blue:hover .pst-icon { box-shadow: 0 0 18px rgba(0,180,255,.28); } .pst-card--green:hover .pst-icon { box-shadow: 0 0 18px rgba(0,210,90,.28); } body.light-mode .pst-card--blue .pst-icon { background: rgba(0,100,220,.08); border-color: rgba(0,120,220,.28); } body.light-mode .pst-card--green .pst-icon { background: rgba(0,150,65,.08); border-color: rgba(0,170,75,.28); } .pst-icon svg { width: 26px; height: 26px; position: relative; z-index: 1; } /* Pulse rings on icon */ .pst-pr { position: absolute; width: 100%; height: 100%; border-radius: 50%; border: 1px solid; opacity: 0; animation: pstRipple 2.6s ease-out infinite; } .pst-pr:nth-child(2) { animation-delay: .9s; } .pst-card--blue .pst-pr { border-color: rgba(0,200,255,.6); } .pst-card--green .pst-pr { border-color: rgba(74,222,128,.6); } @keyframes pstRipple { 0% { transform: scale(.7); opacity: .5; } 100% { transform: scale(1.9); opacity: 0; } } /* ── Stat number ── */ .pst-num { font-family: 'Sora', sans-serif; font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 900; letter-spacing: -.02em; line-height: 1; color: #fff; margin-bottom: 5px; transition: color var(--transition, .3s ease); } body.light-mode .pst-num { color: #0a1628; } /* ── Stat label ── */ .pst-label { font-size: .78rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; margin-bottom: 8px; line-height: 1.3; transition: color var(--transition, .3s ease); } .stat-label { position: relative; display: inline-block; font-size: 14px; margin-bottom: 20px; } .stat-label::after { content: ""; position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%); width: 40px; height: 2px; background: linear-gradient(90deg, transparent, currentColor, transparent); border-radius: 2px; } .pst-card--blue .pst-label { color: #4aaeff; } .pst-card--green .pst-label { color: #4ADE80; } body.light-mode .pst-card--blue .pst-label { color: #0077cc; } body.light-mode .pst-card--green .pst-label { color: #009944; } /* ── Description ── */ .pst-desc { font-size: .76rem; font-weight: 400; line-height: 1.55; margin-bottom: 18px; transition: color var(--transition, .3s ease); } .pst-card--blue .pst-desc { color: rgba(180,210,255,.55); } .pst-card--green .pst-desc { color: rgba(160,230,190,.55); } body.light-mode .pst-card--blue .pst-desc { color: rgba(20,60,120,.55); } body.light-mode .pst-card--green .pst-desc { color: rgba(10,80,40,.55); } /* ── Viz area ── */ .pst-viz { width: 100%; margin-top: auto; } /* Wave SVG */ .pst-wsvg { width: 100%; height: 46px; overflow: visible; } .pst-wpath { fill: none; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 700; stroke-dashoffset: 700; transition: stroke var(--transition, .3s ease); } .pst-warea { transition: fill var(--transition, .3s ease); } /* Bar chart */ .pst-bars { display: flex; align-items: flex-end; gap: 2.5px; height: 46px; } .pst-bar { flex: 1; border-radius: 2px 2px 0 0; transform: scaleY(0); transform-origin: bottom; transition: transform .55s cubic-bezier(.34,1.4,.64,1); } /* World map */ .pst-wmap { width: 100%; height: 46px; } /* ── Footer bar ── */ .pst-footer { margin-top: 20px; background: rgba(255,255,255,.03); border-top: 1px solid rgba(255,255,255,.07); border-radius: 0 0 22px 22px; padding: 13px 22px; display: flex; align-items: center; justify-content: center; gap: 7px; font-size: .78rem; color: rgba(200,220,255,.5); flex-wrap: wrap; transition: background var(--transition, .3s ease), border-color var(--transition, .3s ease), color var(--transition, .3s ease); } body.light-mode .pst-footer { background: rgba(0,0,0,.04); border-top-color: rgba(0,0,0,.08); color: rgba(20,60,100,.5); } .pst-footer .pst-fn { color: #4aaeff; font-weight: 700; transition: color var(--transition, .3s ease); } .pst-footer .pst-fz { color: #4ADE80; font-weight: 700; transition: color var(--transition, .3s ease); } body.light-mode .pst-footer .pst-fn { color: #0077cc; } body.light-mode .pst-footer .pst-fz { color: #009944; } .pst-footer svg { width: 20px; height: 20px; flex-shrink: 0; } /* ── Reveal animation helper ── */ .pst-reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; } .pst-reveal.pst-up { opacity: 1; transform: translateY(0); } .cards-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 8px 0; } .card { background: var(--color-background-secondary); border: 0.5px solid var(--color-border-tertiary); border-radius: var(--border-radius-lg); padding: 16px; overflow: hidden; } .card-label { font-size: 11px; font-weight: 500; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; } .card-value { font-size: 26px; font-weight: 600; color: var(--color-text-primary); margin-bottom: 2px; } .card-sub { font-size: 12px; color: var(--color-text-success); margin-bottom: 14px; } .chart-wrap { position: relative; width: 100%; height: 80px; } #map-svg { width: 100%; height: 80px; } /*#results { background: #0f2847; padding: 100px 20px; color: white; font-family: 'Inter',sans-serif; transition: background var(--transition); position: relative; overflow: hidden; } .results-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; margin-top: 60px; } .result-card { background: var(--card); border: 1px solid var(--border); border-radius: 20px; padding: 36px 24px 28px; position: relative; overflow: hidden; transition: all .4s cubic-bezier(.34,1.2,.64,1); cursor: default; } .result-card:hover { transform: translateY(-8px) } .result-card--blue { border-color: rgba(0,180,216,.2) } .result-card--blue:hover { border-color: rgba(0,180,216,.5); box-shadow: 0 20px 60px rgba(0,180,216,.12) } .result-card--green { border-color: rgba(74,222,128,.2) } .result-card--green:hover { border-color: rgba(74,222,128,.5); box-shadow: 0 20px 60px rgba(74,222,128,.12) } .result-icon-circle { width: 90px; height: 90px; border-radius: 50%; margin: 0 auto 24px; display: flex; align-items: center; justify-content: center; position: relative; } .result-icon-circle::before { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid; opacity: .4; } .result-card--blue .result-icon-circle { background: rgba(0,180,216,.08); border: 1px solid rgba(0,180,216,.25) } .result-card--blue .result-icon-circle::before { border-color: #00b4d8 } .result-card--green .result-icon-circle { background: rgba(74,222,128,.08); border: 1px solid rgba(74,222,128,.25) } .result-card--green .result-icon-circle::before { border-color: #4ADE80 } .result-num { font-family: 'Sora',sans-serif; font-size: clamp(32px,3.5vw,44px); font-weight: 800; color: var(--txt); margin-bottom: 8px; counter-reset: num; } .result-label { font-size: 15px; color: var(--txt2); margin-bottom: 20px } .result-spark { height: 40px; width: 100%; opacity: .6 }*/ /* mini sparkline using SVG */ /*.spark-path { fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 300; stroke-dashoffset: 300; animation: sparkDraw 2s 1s ease forwards; } @keyframes sparkDraw { to { stroke-dashoffset: 0 } }*/ /* ===== THREAT SECTION ===== */ /* ═══════════════════════════════════════════ SECTION WHEN A TREATH APPEARS, WE ACT INSTANTLY ═══════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ WAT — SECTION SHELL ══════════════════════════════════════════════════════════════ */ #wat-process { background: linear-gradient(180deg, #0a1628 0%, #07111e 100%); padding: 100px 20px 90px; position: relative; overflow: hidden; font-family: 'Inter', sans-serif; transition: background var(--transition, .3s ease); } body.light-mode #wat-process { background: linear-gradient(180deg, #e8f0fb 0%, #dde8f5 100%); } /* ── Background grid ── */ .wat-bg-grid { position: absolute; inset: 0; pointer-events: none; z-index: 0; background-image: linear-gradient(rgba(0,180,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(0,180,255,.045) 1px, transparent 1px); background-size: 44px 44px; transition: background-image var(--transition, .3s ease); } body.light-mode .wat-bg-grid { background-image: linear-gradient(rgba(0,100,200,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(0,100,200,.055) 1px, transparent 1px); } /* ── Scanline sweep ── */ .wat-scanline { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; } .wat-scanline::after { content: ''; position: absolute; left: 0; right: 0; height: 48px; background: linear-gradient(transparent, rgba(0,212,255,.035), transparent); animation: watScanMove 9s linear infinite; } body.light-mode .wat-scanline::after { background: linear-gradient(transparent, rgba(0,100,200,.028), transparent); } @keyframes watScanMove { 0% { top: -48px; } 100% { top: 100%; } } /* ── Ambient blobs ── */ .wat-blob { position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; z-index: 0; } .wat-blob--tl { width: 380px; height: 380px; top: -80px; left: -80px; background: radial-gradient(circle, rgba(74,174,255,.09), transparent 65%); } .wat-blob--br { width: 340px; height: 340px; bottom: -60px; right: -60px; background: radial-gradient(circle, rgba(74,222,128,.08), transparent 65%); } /* ── Canvas particles ── */ #wat-canvas { position: absolute; inset: 0; pointer-events: none; z-index: 0; } /* ── Inner wrapper ── */ .wat-inner { max-width: 1240px; margin: 0 auto; position: relative; z-index: 2; } /* ══════════════════════════════════════════════════════════════ WAT — HEADER ══════════════════════════════════════════════════════════════ */ .wat-header { text-align: center; margin-bottom: 64px; } /* Shield icon top */ .wat-shield-icon { display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 50%; background: rgba(74,222,128,.1); border: 1.5px solid rgba(74,222,128,.35); margin-bottom: 22px; animation: watShieldPulse 3s ease-in-out infinite; box-shadow: 0 0 24px rgba(74,222,128,.18); } body.light-mode .wat-shield-icon { background: rgba(0,160,70,.08); border-color: rgba(0,160,70,.3); box-shadow: 0 0 18px rgba(0,160,70,.14); } @keyframes watShieldPulse { 0%,100% { transform: scale(1); box-shadow: 0 0 24px rgba(74,222,128,.18); } 50% { transform: scale(1.07); box-shadow: 0 0 40px rgba(74,222,128,.35); } } .wat-header h2 { font-family: 'Sora', sans-serif; font-size: clamp(28px, 4.2vw, 50px); font-weight: 800; letter-spacing: -.025em; line-height: 1.1; color: #fff; margin: 0 0 14px; transition: color var(--transition, .3s ease); } body.light-mode .wat-header h2 { color: #0a1628; } .wat-header h2 .wat-accent { color: var(--accent-green, #4ADE80); } body.light-mode .wat-header h2 .wat-accent { color: #009944; } .wat-header p { font-size: clamp(14px,1.4vw,17px); color: rgba(200,220,255,.55); line-height: 1.65; margin: 0; transition: color var(--transition, .3s ease); } body.light-mode .wat-header p { color: rgba(20,60,100,.55); } /* ══════════════════════════════════════════════════════════════ WAT — STEPS ROW ══════════════════════════════════════════════════════════════ */ .wat-steps { display: grid; grid-template-columns: 1fr 52px 1fr 52px 1fr 52px 1fr 52px 1fr; align-items: start; gap: 0; margin-bottom: 52px; position: relative; } /* ── Connector column ── */ .wat-connector { display: flex; align-items: center; justify-content: center; padding-top: 40px; /* align with circle centre */ position: relative; } .wat-conn-track { position: relative; width: 100%; height: 2px; overflow: visible; } .wat-conn-track::before { content: ''; position: absolute; inset: 0; border-radius: 2px; background: rgba(74,174,255,.35); } .wat-conn-track--green::before { background: rgba(74,222,128,.4); } /* travelling dot */ .wat-conn-dot { position: absolute; width: 7px; height: 7px; border-radius: 50%; top: 50%; transform: translateY(-50%); background: #4aaeff; box-shadow: 0 0 8px #4aaeff; animation: watDotTravel 2.2s linear infinite; } .wat-conn-track--green .wat-conn-dot { background: #4ADE80; box-shadow: 0 0 8px #4ADE80; animation: watDotTravel 2.2s linear infinite; } .wat-conn-dot--d1 { animation-delay: 0s; } .wat-conn-dot--d2 { animation-delay: .55s; } .wat-conn-dot--d3 { animation-delay: 1.1s; } .wat-conn-dot--d4 { animation-delay: 1.65s; } @keyframes watDotTravel { 0% { left: -4px; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { left: calc(100% + 4px); opacity: 0; } } /* ── Step wrapper ── */ .wat-step { display: flex; flex-direction: column; align-items: center; gap: 0; /* entrance animation */ opacity: 0; transform: translateY(28px); transition: opacity .65s ease, transform .65s ease; } .wat-step.wat-visible { opacity: 1; transform: translateY(0); } /* ── Icon circle ── */ .wat-circle { width: 82px; height: 82px; border-radius: 50%; display: flex; align-items: center; justify-content: center; position: relative; margin-bottom: 10px; cursor: default; transition: transform .3s ease, box-shadow .3s ease; flex-shrink: 0; } .wat-circle:hover { transform: scale(1.09); } /* Blue circles (steps 1–3) */ .wat-circle--blue { background: radial-gradient(circle, rgba(74,174,255,.14), rgba(0,140,200,.06)); border: 2px solid rgba(74,174,255,.55); box-shadow: 0 0 24px rgba(74,174,255,.2), inset 0 0 18px rgba(74,174,255,.06); animation: watOrbitBlue 5s linear infinite; } /* Green circles (steps 4–5) */ .wat-circle--green { background: radial-gradient(circle, rgba(74,222,128,.14), rgba(0,200,80,.06)); border: 2px solid rgba(74,222,128,.55); box-shadow: 0 0 24px rgba(74,222,128,.2), inset 0 0 18px rgba(74,222,128,.06); animation: watOrbitGreen 5s linear infinite; } @keyframes watOrbitBlue { 0% { box-shadow: 0 0 24px rgba(74,174,255,.2), 6px 0 14px rgba(74,174,255,.25), inset 0 0 18px rgba(74,174,255,.06); } 25% { box-shadow: 0 0 24px rgba(74,174,255,.2), 0 6px 14px rgba(74,174,255,.25), inset 0 0 18px rgba(74,174,255,.06); } 50% { box-shadow: 0 0 24px rgba(74,174,255,.2), -6px 0 14px rgba(74,174,255,.25), inset 0 0 18px rgba(74,174,255,.06); } 75% { box-shadow: 0 0 24px rgba(74,174,255,.2), 0 -6px 14px rgba(74,174,255,.25), inset 0 0 18px rgba(74,174,255,.06); } 100% { box-shadow: 0 0 24px rgba(74,174,255,.2), 6px 0 14px rgba(74,174,255,.25), inset 0 0 18px rgba(74,174,255,.06); } } @keyframes watOrbitGreen { 0% { box-shadow: 0 0 24px rgba(74,222,128,.2), 6px 0 14px rgba(74,222,128,.25), inset 0 0 18px rgba(74,222,128,.06); } 25% { box-shadow: 0 0 24px rgba(74,222,128,.2), 0 6px 14px rgba(74,222,128,.25), inset 0 0 18px rgba(74,222,128,.06); } 50% { box-shadow: 0 0 24px rgba(74,222,128,.2), -6px 0 14px rgba(74,222,128,.25), inset 0 0 18px rgba(74,222,128,.06); } 75% { box-shadow: 0 0 24px rgba(74,222,128,.2), 0 -6px 14px rgba(74,222,128,.25), inset 0 0 18px rgba(74,222,128,.06); } 100% { box-shadow: 0 0 24px rgba(74,222,128,.2), 6px 0 14px rgba(74,222,128,.25), inset 0 0 18px rgba(74,222,128,.06); } } /* Step number badge */ .wat-num { position: absolute; top: -9px; left: -9px; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'Sora', sans-serif; font-size: 11px; font-weight: 800; color: #020c18; z-index: 2; } .wat-circle--blue .wat-num { background: #4aaeff; } .wat-circle--green .wat-num { background: #4ADE80; } /* Icon SVG inside circle */ .wat-circle svg { width: 32px; height: 32px; position: relative; z-index: 1; } /* ── Step card ── */ .wat-card { background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.09); border-radius: 14px; padding: 18px 15px; width: 100%; text-align: left; position: relative; overflow: hidden; transition: transform .32s ease, border-color .32s ease, box-shadow .32s ease, background var(--transition, .3s ease); backdrop-filter: blur(10px); } .wat-card:hover { transform: translateY(-5px); } /* top glow stripe */ .wat-card::before { content: ''; position: absolute; top: 0; left: 14px; right: 14px; height: 2px; border-radius: 0 0 2px 2px; opacity: 0; transition: opacity .3s ease; } .wat-card:hover::before { opacity: 1; } /* Blue card */ .wat-card--blue { border-color: rgba(74,174,255,.2); } .wat-card--blue::before { background: linear-gradient(90deg, transparent, #4aaeff, transparent); box-shadow: 0 0 10px #4aaeff; } .wat-card--blue:hover { border-color: rgba(74,174,255,.5); box-shadow: 0 12px 36px rgba(74,174,255,.12); } /* Green card */ .wat-card--green { border-color: rgba(74,222,128,.22); } .wat-card--green::before { background: linear-gradient(90deg, transparent, #4ADE80, transparent); box-shadow: 0 0 10px #4ADE80; } .wat-card--green:hover { border-color: rgba(74,222,128,.55); box-shadow: 0 12px 36px rgba(74,222,128,.12); } /* Light mode cards */ body.light-mode .wat-card { background: rgba(255,255,255,.88); border-color: rgba(0,0,0,.09); box-shadow: 0 4px 18px rgba(0,100,200,.07); backdrop-filter: none; } body.light-mode .wat-card--blue:hover { border-color: rgba(0,140,255,.45); box-shadow: 0 12px 32px rgba(0,120,200,.12); } body.light-mode .wat-card--green:hover { border-color: rgba(0,180,80,.45); box-shadow: 0 12px 32px rgba(0,150,65,.12); } /* Card title */ .wat-card-title { font-family: 'Sora', sans-serif; font-size: 14px; font-weight: 700; margin-bottom: 8px; letter-spacing: .01em; transition: color var(--transition, .3s ease); } .wat-card--blue .wat-card-title { color: #4aaeff; } .wat-card--green .wat-card-title { color: #4ADE80; } body.light-mode .wat-card--blue .wat-card-title { color: #0077cc; } body.light-mode .wat-card--green .wat-card-title { color: #009944; } /* Card body text */ .wat-card-body { font-size: 12.5px; line-height: 1.65; color: rgba(200,220,255,.58); transition: color var(--transition, .3s ease); } body.light-mode .wat-card-body { color: rgba(20,60,100,.58); } /* ══════════════════════════════════════════════════════════════ WAT — FOOTER BAR ══════════════════════════════════════════════════════════════ */ .wat-footer-bar { display: inline-flex; align-items: center; gap: 28px; background: rgba(255,255,255,.04); border: 1px solid rgba(74,222,128,.28); border-radius: 50px; padding: 14px 32px; backdrop-filter: blur(12px); flex-wrap: wrap; justify-content: center; transition: background var(--transition, .3s ease), border-color var(--transition, .3s ease); /* entrance */ opacity: 0; transform: translateY(18px); transition: opacity .7s ease 1s, transform .7s ease 1s, background var(--transition, .3s ease), border-color var(--transition, .3s ease); } .wat-footer-bar.wat-visible { opacity: 1; transform: translateY(0); } body.light-mode .wat-footer-bar { background: rgba(255,255,255,.8); border-color: rgba(0,160,70,.3); box-shadow: 0 4px 20px rgba(0,100,60,.08); } .wat-footer-wrap { text-align: center; } .wat-fi { display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 600; font-family: 'Sora', sans-serif; white-space: nowrap; letter-spacing: .02em; color: rgba(200,220,255,.7); transition: color var(--transition, .3s ease); } body.light-mode .wat-fi { color: rgba(20,60,100,.65); } .wat-fi--green { color: var(--accent-green, #4ADE80); } body.light-mode .wat-fi--green { color: #009944; } .wat-fi-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-green, #4ADE80); box-shadow: 0 0 8px var(--accent-green, #4ADE80); flex-shrink: 0; animation: watDotPulse 2s ease-in-out infinite; } @keyframes watDotPulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .5; transform: scale(1.4); } } .wat-fsep { width: 1px; height: 20px; background: rgba(255,255,255,.12); flex-shrink: 0; } body.light-mode .wat-fsep { background: rgba(0,0,0,.12); } /* ══════════════════════════════════════════════════════════════ WAT — REVEAL HELPER ══════════════════════════════════════════════════════════════ */ .wat-reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; } .wat-reveal.wat-up { opacity: 1; transform: translateY(0); } /* ══════════════════════════════════════════════════════════════ WAT — RESPONSIVE ══════════════════════════════════════════════════════════════ */ @media (max-width: 1100px) { .wat-steps { /* 3-step + connector layout on tablet */ grid-template-columns: 1fr 40px 1fr 40px 1fr; row-gap: 32px; } /* hide connectors 3 & 4 */ .wat-connector:nth-of-type(4), .wat-connector:nth-of-type(8) { display: none; } /* wrap last 2 steps into new "row" — achieved via subgrid wrap */ .wat-steps { grid-template-columns: 1fr 40px 1fr 40px 1fr; } } @media (max-width: 860px) { #wat-process { padding: 70px 16px 64px; } .wat-steps { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; } .wat-step { flex: 0 0 calc(50% - 10px); } .wat-connector { display: none; } } @media (max-width: 520px) { .wat-step { flex: 0 0 100%; } .wat-circle { width: 70px; height: 70px; } .wat-circle svg { width: 28px; height: 28px; } .wat-footer-bar { padding: 12px 20px; gap: 14px; } .wat-fsep { display: none; } } /*#process { background: linear-gradient(to bottom, #0a1628, #0d1e35); padding: 100px 20px; text-align: center; position: relative; overflow: hidden; color: white; font-family: 'Sora', sans-serif; transition: background var(--transition); } .process-steps { display: grid; grid-template-columns: repeat(5,1fr); gap: 0; margin: 70px 0 50px; align-items: start; position: relative; }*/ /* connector line behind steps */ /*.process-steps::before { content: ''; position: absolute; top: 48px; left: 10%; right: 10%; height: 2px; background: linear-gradient(90deg,#4aaeff,#00b4d8,#4ADE80,#00e676,#4ADE80); z-index: 0; opacity: .3; } .step { position: relative; z-index: 1; padding: 0 8px; display: flex; flex-direction: column; align-items: center } .step-connector { position: absolute; top: 48px; left: calc(50% + 48px); width: calc(100% - 96px); height: 2px; display: flex; align-items: center; } .step:last-child .step-connector { display: none } .step-circle { width: 96px; height: 96px; border-radius: 50%; display: flex; align-items: center; justify-content: center; position: relative; margin-bottom: 32px; cursor: default; transition: transform .3s; } .step-circle:hover { transform: scale(1.08) } .step-circle::before { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid; opacity: .4; } .step-circle::after { content: ''; position: absolute; inset: -12px; border-radius: 50%; border: 1px solid; opacity: .15; } .step-blue .step-circle { background: radial-gradient(circle,rgba(74,174,255,.12),rgba(0,180,216,.06)); border: 2px solid rgba(74,174,255,.5); box-shadow: 0 0 30px rgba(74,174,255,.2); } .step-blue .step-circle::before { border-color: #4aaeff } .step-blue .step-circle::after { border-color: #4aaeff } .step-green .step-circle { background: radial-gradient(circle,rgba(74,222,128,.12),rgba(0,230,118,.06)); border: 2px solid rgba(74,222,128,.5); box-shadow: 0 0 30px rgba(74,222,128,.2); } .step-green .step-circle::before { border-color: #4ADE80 } .step-green .step-circle::after { border-color: #4ADE80 } .step-num { position: absolute; top: -8px; left: -8px; width: 26px; height: 26px; border-radius: 50%; font-family: 'Sora',sans-serif; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; } .step-blue .step-num { background: #4aaeff; color: #020c18 } .step-green .step-num { background: #4ADE80; color: #020c18 } .step-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 18px; width: 100%; text-align: left; } .step-blue .step-card { border-color: rgba(74,174,255,.2) } .step-green .step-card { border-color: rgba(74,222,128,.2) } .step-title { font-family: 'Sora',sans-serif; font-size: 15px; font-weight: 700; margin-bottom: 8px; } .step-blue .step-title { color: #4aaeff } .step-green .step-title { color: #4ADE80 } .step-divider { width: 24px; height: 2px; margin-bottom: 8px } .step-blue .step-divider { background: #4aaeff } .step-green .step-divider { background: #4ADE80 } .step-desc { font-size: 13px; color: var(--txt2); line-height: 1.5 }*/ /* arrow connector */ /*.step-arrow { position: absolute; top: 40px; right: -20px; z-index: 2; } .step-arrow-line { width: 40px; height: 2px; position: relative; } .step-blue .step-arrow-line { background: rgba(74,174,255,.5) } .step-green .step-arrow-line { background: rgba(74,222,128,.5) } .step-arrow-head { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 0; height: 0; } .step-blue .step-arrow-head { border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 8px solid rgba(74,174,255,.8) } .step-green .step-arrow-head { border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 8px solid rgba(74,222,128,.8) }*/ /* process footer bar */ /*.process-footer { display: inline-flex; align-items: center; gap: 24px; background: var(--card); border: 1px solid var(--border); border-radius: 40px; padding: 14px 28px; font-size: 14px; } .process-footer-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green2); box-shadow: 0 0 8px var(--green2) } .pf-sep { width: 1px; height: 18px; background: var(--border2) } .pf-green { color: var(--green2); font-weight: 600 } .pf-muted { color: var(--txt2) }*/ /* ═══════════════════════════════════════════ ██ SECTION 5 — TESTIMONIALS SECTION ═══════════════════════════════════════════ */ #testimonials { padding: 90px 24px 80px; background: linear-gradient(180deg, #04111f 0%, #020c18 100%); position: relative; overflow: hidden; transition: background var(--transition); } body.light-mode #testimonials { background: linear-gradient(180deg, #ddeeff 0%, #ccd8ee 100%); } /* BG blobs */ #testimonials::before { content: ''; position: absolute; top: -100px; left: -100px; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(circle, rgba(74,174,255,0.06), transparent 65%); pointer-events: none; } #testimonials::after { content: ''; position: absolute; bottom: -80px; right: -80px; width: 400px; height: 400px; border-radius: 50%; background: radial-gradient(circle, rgba(74,222,128,0.05), transparent 65%); pointer-events: none; } .t-inner { max-width: 1200px; margin: 0 auto; position: relative; z-index: 2; text-align: center; } .t-shield-icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: rgba(74,222,128,0.10); border: 1.5px solid rgba(74,222,128,0.35); margin-bottom: 20px; animation: shieldPulse 3s ease-in-out infinite; } body.light-mode .t-shield-icon { background: rgba(0,160,70,0.09); border-color: rgba(0,160,70,0.3); } @keyframes shieldPulse { 0%,100% { transform: scale(1); box-shadow: 0 0 20px rgba(74,222,128,0.18); } 50% { transform: scale(1.07); box-shadow: 0 0 36px rgba(74,222,128,0.35); } } .t-title { font-family: 'Sora', sans-serif; font-size: clamp(26px, 4vw, 42px); font-weight: 800; color: #fff; line-height: 1.1; letter-spacing: -0.025em; margin-bottom: 12px; transition: color var(--transition); } body.light-mode .t-title { color: #0a1628; } .t-accent { color: var(--accent-green); } body.light-mode .t-accent { color: #009944; } .t-sub { font-size: clamp(14px,1.4vw,17px); color: rgba(200,220,255,0.55); margin-bottom: 52px; line-height: 1.65; transition: color var(--transition); } body.light-mode .t-sub { color: rgba(20,60,100,0.55); } /* Grid */ .testi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 36px; } @media (max-width: 900px) { .testi-grid { grid-template-columns: repeat(2,1fr); } } @media (max-width: 520px) { .testi-grid { grid-template-columns: 1fr; } } .testi-card { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.10); border-radius: 16px; padding: 26px; text-align: left; display: flex; flex-direction: column; position: relative; overflow: hidden; transition: transform 0.35s cubic-bezier(0.34,1.2,0.64,1), box-shadow 0.35s ease, border-color 0.35s ease, background var(--transition); cursor: default; } body.light-mode .testi-card { background: rgba(255,255,255,0.82); border-color: rgba(0,0,0,0.09); box-shadow: 0 4px 20px rgba(0,100,200,0.07); } /* Top glow stripe */ .testi-card::before { content: ''; position: absolute; top: 0; left: 14px; right: 14px; height: 2px; border-radius: 0 0 2px 2px; opacity: 0; transition: opacity 0.3s; } .testi-card:hover::before { opacity: 1; } .testi-card--blue::before { background: linear-gradient(90deg,transparent,#4aaeff,transparent); box-shadow: 0 0 10px #4aaeff; } .testi-card--green::before { background: linear-gradient(90deg,transparent,#4ADE80,transparent); box-shadow: 0 0 10px #4ADE80; } .testi-card--blue { border-color: rgba(74,174,255,0.18); } .testi-card--green { border-color: rgba(74,222,128,0.18); } .testi-card--blue:hover { transform: translateY(-8px) scale(1.01); border-color: rgba(74,174,255,0.55); box-shadow: 0 20px 50px rgba(74,174,255,0.15); } .testi-card--green:hover { transform: translateY(-8px) scale(1.01); border-color: rgba(74,222,128,0.55); box-shadow: 0 20px 50px rgba(74,222,128,0.15); } .testi-top { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .testi-avatar { width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,0.05); border: 2px solid rgba(74,174,255,0.35); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: border-color var(--transition); } body.light-mode .testi-avatar { background: rgba(0,0,0,0.05); border-color: rgba(74,174,255,0.4); } .testi-card--green .testi-avatar { border-color: rgba(74,222,128,0.4); } .testi-stars { font-size: 16px; color: var(--accent-yellow); letter-spacing: 2px; } .testi-card--green .testi-stars { color: var(--accent-green); } .testi-quote { font-family: 'Sora', sans-serif; font-size: 44px; line-height: 1; margin-bottom: 8px; opacity: 0.5; color: #4aaeff; } .testi-card--green .testi-quote { color: #4ADE80; } .testi-text { font-family: 'Sora', sans-serif; font-size: clamp(14px,1.3vw,17px); font-weight: 700; color: #fff; line-height: 1.3; margin-bottom: 18px; flex: 1; transition: color var(--transition); } body.light-mode .testi-text { color: #0a1628; } .testi-divider { height: 1px; background: rgba(255,255,255,0.08); margin-bottom: 16px; } body.light-mode .testi-divider { background: rgba(0,0,0,0.08); } .testi-company { display: flex; align-items: center; gap: 10px; } .testi-co-icon { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: rgba(74,174,255,0.08); border: 1px solid rgba(74,174,255,0.2); flex-shrink: 0; transition: background var(--transition), border-color var(--transition); } .testi-card--green .testi-co-icon { background: rgba(74,222,128,0.08); border-color: rgba(74,222,128,0.2); } body.light-mode .testi-co-icon { background: rgba(74,174,255,0.10); } .testi-co-name { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 2px; } .testi-co-role { font-size: 12px; color: var(--text-muted); } /* Dots */ .testi-dots { display: flex; justify-content: center; gap: 8px; margin-top: 8px; } .t-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,0.18); cursor: pointer; transition: all 0.3s; } body.light-mode .t-dot { background: rgba(0,0,0,0.18); } .t-dot.active { background: var(--accent-green); box-shadow: 0 0 8px var(--accent-green); } /*#testimonials { background: linear-gradient(160deg,#04111f 0%,#020c18 100%); padding: 100px 20px; text-align: center; } .testi-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; margin: 56px 0 36px; } .testi-card { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 28px; text-align: left; transition: all .35s ease; position: relative; overflow: hidden; } .testi-card:hover { transform: translateY(-6px); border-color: var(--border2); box-shadow: var(--shadow) } .testi-card--blue { border-color: rgba(0,180,216,.15) } .testi-card--blue:hover { border-color: rgba(0,180,216,.4); box-shadow: 0 20px 50px rgba(0,180,216,.1) } .testi-card--green { border-color: rgba(74,222,128,.15) } .testi-card--green:hover { border-color: rgba(74,222,128,.4); box-shadow: 0 20px 50px rgba(74,222,128,.1) } .testi-top { display: flex; align-items: center; gap: 14px; margin-bottom: 20px } .testi-avatar { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg,#051525,#0a2040); border: 2px solid var(--border2); overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .testi-card--blue .testi-avatar { border-color: rgba(0,180,216,.4) } .testi-card--green .testi-avatar { border-color: rgba(74,222,128,.4) } .testi-stars { display: flex; gap: 3px } .star { color: var(--green2); font-size: 18px } .testi-quote-icon { font-family: 'Sora',sans-serif; font-size: 48px; color: var(--blue2); opacity: .4; line-height: 1; margin-bottom: 12px; } .testi-card--green .testi-quote-icon { color: var(--green2) } .testi-text { font-family: 'Sora',sans-serif; font-size: clamp(16px,1.5vw,20px); font-weight: 700; color: var(--txt); line-height: 1.3; margin-bottom: 20px; } .testi-divider { width: 100%; height: 1px; background: var(--border); margin-bottom: 20px } .testi-company { display: flex; align-items: center; gap: 12px } .testi-co-icon { width: 38px; height: 38px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: rgba(0,180,216,.08); border: 1px solid rgba(0,180,216,.2); } .testi-card--green .testi-co-icon { background: rgba(74,222,128,.08); border-color: rgba(74,222,128,.2) } .testi-co-name { font-size: 13px; font-weight: 600; color: var(--txt); margin-bottom: 2px } .testi-co-role { font-size: 12px; color: var(--txt3) }*/ /* slider dots */ /*.testi-dots { display: flex; justify-content: center; gap: 8px } .t-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--border2); cursor: pointer; transition: all .3s } .t-dot.active { background: var(--green2); box-shadow: 0 0 8px var(--green2) }*/ /* ═══════════════════════════════════════════ ██ SECTION 6 — CTA / READY TO PROTECT ═══════════════════════════════════════════ */ /* ══════════════════════════════════ CTA FINAL SECTION ══════════════════════════════════ */ #index-cta-final { background: linear-gradient(180deg, #0a1628 0%, #07111e 100%); padding: 90px 24px 100px; position: relative; overflow: hidden; transition: background var(--transition); } body.light-mode #index-cta-final { background: linear-gradient(180deg, #e8f0fb 0%, #dde8f5 100%); } #index-cta-final::before { content: ''; position: absolute; top: -80px; left: -80px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle,rgba(74,174,255,0.07),transparent 65%); pointer-events: none; } #index-cta-final::after { content: ''; position: absolute; bottom: -60px; right: -60px; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle,rgba(74,222,128,0.06),transparent 65%); pointer-events: none; } .cta-inner { max-width: 1200px; margin: 0 auto; position: relative; z-index: 2; } .cta-grid { max-width: 1200px; margin: 0 auto; position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } @media (max-width: 860px) { .cta-grid { grid-template-columns: 1fr; gap: 48px; } .cta-right { order: -1; } } /* LEFT */ .cta-h1 { font-family: 'Sora', sans-serif; font-size: clamp(28px, 4vw, 50px); font-weight: 800; line-height: 1.08; letter-spacing: -0.025em; color: #fff; margin-bottom: 18px; transition: color var(--transition); } body.light-mode .cta-h1 { color: #0a1628; } .cta-h1 .accent { color: var(--accent-green); } body.light-mode .cta-h1 .accent { color: #009944; } .cta-desc { font-size: clamp(14px,1.4vw,17px); color: rgba(200,220,255,0.55); line-height: 1.65; margin-bottom: 32px; max-width: 460px; transition: color var(--transition); } body.light-mode .cta-desc { color: rgba(20,60,100,0.58); } .cta-btns { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 44px; } .btn-primary-cta { display: inline-flex; align-items: center; gap: 9px; padding: 14px 26px; background: var(--accent-green); color: #020c18; border: none; border-radius: 10px; font-family: 'Sora', sans-serif; font-size: 15px; font-weight: 700; cursor: pointer; text-decoration: none; transition: background 0.25s, transform 0.2s, box-shadow 0.2s; } .btn-primary-cta:hover { background: #22c55e; transform: translateY(-2px); box-shadow: 0 10px 28px rgba(74,222,128,0.3); } .btn-outline-cta { display: inline-flex; align-items: center; gap: 9px; padding: 14px 26px; background: transparent; color: #fff; border: 2px solid rgba(74,222,128,0.45); border-radius: 10px; font-family: 'Sora', sans-serif; font-size: 15px; font-weight: 600; cursor: pointer; text-decoration: none; transition: border-color 0.25s, transform 0.2s, background 0.25s; } body.light-mode .btn-outline-cta { color: #0a1628; border-color: rgba(0,160,70,0.4); } .btn-outline-cta:hover { border-color: var(--accent-green); background: rgba(74,222,128,0.07); transform: translateY(-2px); color: #fff; } body.light-mode .btn-outline-cta:hover { color: #0a1628; } /* Mini stats */ .cta-mini-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; } @media (max-width: 600px) { .cta-mini-stats { grid-template-columns: repeat(2,1fr); } } .cta-mini { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; padding: 14px 12px; display: flex; flex-direction: column; gap: 4px; transition: background var(--transition), border-color var(--transition), transform 0.25s; } body.light-mode .cta-mini { background: rgba(255,255,255,0.75); border-color: rgba(0,0,0,0.09); } .cta-mini:hover { transform: translateY(-3px); border-color: rgba(74,222,128,0.3); } .cta-mini-icon { color: var(--accent-green); margin-bottom: 2px; } .cta-mini-title { font-size: 13px; font-weight: 700; color: #fff; font-family: 'Sora',sans-serif; transition: color var(--transition); } body.light-mode .cta-mini-title { color: #0a1628; } .cta-mini-desc { font-size: 11px; color: rgba(200,220,255,0.45); line-height: 1.4; transition: color var(--transition); } body.light-mode .cta-mini-desc { color: rgba(20,60,100,0.45); } /* RIGHT shield scene */ .cta-right { display: flex; align-items: center; justify-content: center; position: relative; min-height: 480px; } .shield-scene { position: relative; width: 300px; height: 380px; display: flex; align-items: center; justify-content: center; animation: shieldFloat 4.5s ease-in-out infinite; } @keyframes shieldFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } /* Pulse rings */ .pulse-ring { position: absolute; border-radius: 50%; border: 1px solid rgba(74,222,128,0.14); top: 50%; left: 50%; transform: translate(-50%,-50%); animation: pRing 3.2s ease-in-out infinite; pointer-events: none; } .pulse-ring:nth-child(2) { animation-delay: 0.7s; border-color: rgba(74,222,128,0.08); } .pulse-ring:nth-child(3) { animation-delay: 1.4s; border-color: rgba(74,174,255,0.07); } @keyframes pRing { 0%,100% { transform: translate(-50%,-50%) scale(1); opacity: 1; } 50% { transform: translate(-50%,-50%) scale(1.05); opacity: .45; } } /* Shield SVG */ .shield-svg { position: relative; z-index: 5; width: 280px; height: auto; filter: drop-shadow(0 0 22px rgba(74,222,128,0.55)) drop-shadow(0 0 50px rgba(74,174,255,0.25)); } /* Ground rings */ .ground-rings { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); pointer-events: none; z-index: 4; } .gring { display: block; border-radius: 50%; border: 1px solid rgba(74,222,128,0.28); position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); animation: groundPulse 3s ease-in-out infinite; } @keyframes groundPulse { 0%,100% { opacity: .8; transform: translateX(-50%) scaleX(1); } 50% { opacity: .35; transform: translateX(-50%) scaleX(.88); } } /* Floating badges */ .f-badge { position: absolute; background: rgba(5,18,35,0.92); border: 1px solid rgba(74,222,128,0.35); border-radius: 10px; padding: 8px 13px; backdrop-filter: blur(14px); display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; font-family: 'Sora', sans-serif; color: #fff; white-space: nowrap; letter-spacing: .05em; z-index: 10; } body.light-mode .f-badge { background: rgba(255,255,255,0.92); border-color: rgba(0,160,70,0.35); color: #0a1628; } .f-badge-dot { width: 8px; height: 8px; border-radius: 50%; background: #4ADE80; box-shadow: 0 0 7px #4ADE80; flex-shrink: 0; } .badge-1 { top: 30%; right: 3%; animation: fb 3.2s ease-in-out infinite; } .badge-2 { top: 44%; right: -5%; animation: fb 3.2s ease-in-out .7s infinite; } .badge-3 { top: 60%; right: 1%; animation: fb 3.2s ease-in-out 1.4s infinite; } @keyframes fb { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } /* Laser beams */ .laser { position: absolute; top: 50%; height: 2px; width: 100px; transform: translateY(-50%); border-radius: 2px; z-index: 3; animation: laserPulse 2.5s ease-in-out infinite alternate; } .laser--left { right: 52%; background: linear-gradient(to left, #00d4ff, transparent); box-shadow: 0 0 8px #00d4ff; } .laser--right { left: 52%; background: linear-gradient(to right, #4ADE80, transparent); box-shadow: 0 0 8px #4ADE80; } @keyframes laserPulse { from { opacity: .45; } to { opacity: 1; } } /* Responsive */ @media (max-width: 640px) { #testimonials { padding: 60px 16px 60px; } #cta-final { padding: 60px 16px 70px; } .badge-1, .badge-2, .badge-3 { right: 0; font-size: 10px; } .shield-scene { width: 260px; } .shield-svg { width: 230px; } } /* ── ZED CTA Row ── */ .zed-cta-row { display: flex; justify-content: center; margin-top: 36px; } .zed-cta-btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 36px; background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); color: #fff; font-size: 0.97rem; font-weight: 600; border-radius: 50px; text-decoration: none; letter-spacing: 0.01em; box-shadow: 0 0 28px rgba(74,222,128,0.35), 0 0 8px rgba(74,222,128,0.15); transition: transform 0.2s, box-shadow 0.2s; position: relative; overflow: hidden; } .zed-cta-btn::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, transparent 60%); border-radius: inherit; } .zed-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 0 40px rgba(74,222,128,0.55), 0 0 14px rgba(74,222,128,0.25); } /* Animated pulse dot */ .zed-cta-pulse { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #fff; opacity: 0.85; animation: zed-pulse 1.6s infinite; flex-shrink: 0; } @keyframes zed-pulse { 0%, 100% { opacity: 0.85; transform: scale(1); } 50% { opacity: 0.4; transform: scale(1.5); } } /* ── EYP Compliance inline button ── */ .eyp-inline-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 24px; border-radius: 50px; font-size: 0.875rem; font-weight: 600; text-decoration: none; transition: transform 0.2s, box-shadow 0.2s; letter-spacing: 0.01em; } .eyp-inline-btn--green { background: rgba(74,222,128,0.12); color: #4ADE80; border: 1px solid rgba(74,222,128,0.35); box-shadow: 0 0 16px rgba(74,222,128,0.12); } .eyp-inline-btn--green:hover { transform: translateY(-2px); background: rgba(74,222,128,0.2); box-shadow: 0 0 24px rgba(74,222,128,0.25); } /* Desktop */ /*.footer-email,*/ .footer-phone, .footer-address { display: none; } /* Mobile */ @media (max-width: 768px) { .footer-address { display: none; } }