/* ========================================================================== WEBEXCE — Main Stylesheet Dark/Light theme via [data-theme] on . All animations are transform/opacity only (GPU-cheap) and scroll-reveal effects run once per element via IntersectionObserver — nothing loops forever, so the page stays smooth while scrolling. ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500&display=swap'); /* -------------------------------------------------------------------- Theme tokens -------------------------------------------------------------------- */ :root, html[data-theme="dark"]{ --bg-void:#0A0916; --bg-deep:#160E2E; --bg-navy:#100B22; --purple:#7C3AED; --purple-bright:#9D5CFF; --pink:#EC4899; --green:#10D391; --red:#F15A5A; --gold:#FFC94D; --text-primary:#F7F6FC; --text-muted:#9C9AB5; --card-bg:rgba(255,255,255,0.035); --card-bg-strong:rgba(255,255,255,0.055); --card-border:rgba(255,255,255,0.09); --input-bg:rgba(255,255,255,0.03); --shadow-color:rgba(0,0,0,0.55); --scrollbar-track:rgba(255,255,255,0.04); } html[data-theme="light"]{ --bg-void:#F5F3FB; --bg-deep:#EDE9F8; --bg-navy:#E6E1F5; --purple:#7C3AED; --purple-bright:#7C3AED; --pink:#DB2777; --green:#0EA875; --red:#DC2626; --gold:#D97706; --text-primary:#1A1230; --text-muted:#605C77; --card-bg:rgba(124,58,237,0.04); --card-bg-strong:rgba(124,58,237,0.07); --card-border:rgba(20,10,40,0.10); --input-bg:rgba(20,10,40,0.03); --shadow-color:rgba(100,80,150,0.18); --scrollbar-track:rgba(20,10,40,0.05); } /* -------------------------------------------------------------------- Reset & base -------------------------------------------------------------------- */ *, *::before, *::after{ box-sizing:border-box; margin:0; padding:0; } html{ scroll-behavior:smooth; } body{ font-family:'Inter', sans-serif; background:var(--bg-void); color:var(--text-primary); overflow-x:hidden; transition:background 0.4s ease, color 0.4s ease; } img, svg{ display:block; max-width:100%; } a{ color:inherit; } ul{ list-style:none; } button{ font-family:inherit; } ::selection{ background:var(--purple); color:#fff; } ::-webkit-scrollbar{ width:10px; } ::-webkit-scrollbar-track{ background:var(--scrollbar-track); } ::-webkit-scrollbar-thumb{ background:linear-gradient(var(--purple), var(--pink)); border-radius:10px; } .wx-container{ max-width:1440px; margin:0 auto; padding:0 clamp(20px, 5vw, 64px); } .wx-section{ position:relative; padding:clamp(64px, 8vw, 110px) 0; scroll-margin-top:90px; } .wx-eyebrow{ display:inline-flex; align-items:center; gap:8px; font-family:'JetBrains Mono', monospace; font-size:12px; letter-spacing:0.08em; color:var(--green); background:rgba(16,211,145,0.09); border:1px solid rgba(16,211,145,0.3); padding:6px 14px; border-radius:100px; margin-bottom:20px; } .wx-eyebrow::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 8px var(--green); } .wx-section-head{ text-align:center; max-width:680px; margin:0 auto clamp(44px, 5vw, 64px); } .wx-section-head h2{ font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:clamp(28px, 3.2vw, 42px); line-height:1.15; color:var(--text-primary); letter-spacing:-0.02em; margin-bottom:16px; } .wx-section-head p{ font-size:16px; line-height:1.65; color:var(--text-muted); } .grad{ background:linear-gradient(92deg, var(--purple-bright), var(--pink)); -webkit-background-clip:text; background-clip:text; color:transparent; } /* -------------------------------------------------------------------- Scroll-reveal (IntersectionObserver-driven, one-time, cheap) -------------------------------------------------------------------- */ .reveal{ opacity:0; transform:translateY(24px); transition:opacity 0.6s ease, transform 0.6s cubic-bezier(.2,.8,.3,1); } .reveal.in-view{ opacity:1; transform:translateY(0); } .reveal-delay-1.in-view{ transition-delay:0.08s; } .reveal-delay-2.in-view{ transition-delay:0.16s; } .reveal-delay-3.in-view{ transition-delay:0.24s; } @media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } } /* -------------------------------------------------------------------- Custom cursor (desktop / mouse only) -------------------------------------------------------------------- */ .wx-cursor-dot, .wx-cursor-ring{ position:fixed; top:0; left:0; z-index:9999; pointer-events:none; border-radius:50%; transform:translate3d(-50%,-50%,0); will-change:transform; } .wx-cursor-dot{ width:7px; height:7px; background:var(--pink); transition:opacity 0.2s ease; } .wx-cursor-ring{ width:34px; height:34px; border:1.5px solid var(--purple-bright); transition:width 0.2s ease, height 0.2s ease, border-color 0.2s ease, opacity 0.2s ease; } .wx-cursor-ring.wx-cursor-hover{ width:52px; height:52px; border-color:var(--pink); background:rgba(236,72,153,0.08); } body.wx-has-custom-cursor, body.wx-has-custom-cursor a, body.wx-has-custom-cursor button, body.wx-has-custom-cursor input, body.wx-has-custom-cursor textarea, body.wx-has-custom-cursor select{ cursor:none; } @media (pointer:coarse){ .wx-cursor-dot, .wx-cursor-ring{ display:none !important; } } /* -------------------------------------------------------------------- Buttons (shared) -------------------------------------------------------------------- */ .wx-btn{ font-family:'Inter', sans-serif; font-weight:600; font-size:14.5px; padding:14px 26px; border-radius:100px; cursor:pointer; border:none; display:inline-flex; align-items:center; justify-content:center; gap:9px; text-decoration:none; transition:transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease; } .wx-btn-primary{ background:linear-gradient(100deg, var(--purple), var(--pink)); color:#fff; box-shadow:0 8px 26px -8px rgba(124,58,237,0.55); } .wx-btn-primary:hover{ transform:translateY(-3px); box-shadow:0 14px 32px -8px rgba(236,72,153,0.5); } .wx-btn-ghost{ background:var(--card-bg); color:var(--text-primary); border:1px solid var(--card-border); } .wx-btn-ghost:hover{ background:var(--card-bg-strong); transform:translateY(-3px); } /* ========================================================================== HEADER ========================================================================== */ .wx-header{ position:sticky; top:0; z-index:1000; width:100%; background: radial-gradient(ellipse 700px 220px at 15% 0%, rgba(124,58,237,0.22), transparent 70%), radial-gradient(ellipse 600px 220px at 85% 0%, rgba(236,72,153,0.16), transparent 70%), var(--bg-void); border-bottom:1px solid var(--card-border); transition:box-shadow 0.3s ease, background 0.4s ease; } .wx-header.wx-scrolled{ box-shadow:0 10px 34px -14px rgba(124,58,237,0.35); } .wx-header-inner{ max-width:1440px; margin:0 auto; padding:0 clamp(20px,5vw,64px); display:flex; align-items:center; justify-content:space-between; height:76px; gap:16px; } .wx-logo{ display:flex; align-items:center; gap:10px; font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:20px; color:var(--text-primary); letter-spacing:-0.01em; text-decoration:none; flex-shrink:0; } .wx-logo-mark{ width:34px; height:34px; border-radius:9px; flex-shrink:0; background:linear-gradient(135deg, var(--purple), var(--pink)); display:flex; align-items:center; justify-content:center; } .wx-logo-mark svg{ width:18px; height:18px; color:#fff; } .wx-nav-links{ display:flex; align-items:center; gap:4px; list-style:none; background:var(--card-bg); border:1px solid var(--card-border); border-radius:100px; padding:6px; } .wx-nav-links a{ font-size:14px; font-weight:500; color:var(--text-muted); text-decoration:none; padding:9px 16px; border-radius:100px; transition:color 0.25s ease, background 0.25s ease; display:inline-block; } .wx-nav-links a:hover{ color:var(--text-primary); background:linear-gradient(100deg, rgba(124,58,237,0.25), rgba(236,72,153,0.18)); } .wx-header-actions{ display:flex; align-items:center; gap:14px; flex-shrink:0; } .wx-theme-toggle{ width:44px; height:44px; border-radius:100px; flex-shrink:0; background:var(--card-bg); border:1px solid var(--card-border); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:border-color 0.25s ease, background 0.25s ease; position:relative; } .wx-theme-toggle:hover{ border-color:rgba(157,92,255,0.4); } .wx-theme-toggle svg{ width:19px; height:19px; position:absolute; color:var(--text-primary); transition:opacity 0.25s ease, transform 0.35s ease; } .wx-icon-sun{ opacity:0; transform:rotate(-90deg) scale(0.6); } .wx-icon-moon{ opacity:1; transform:rotate(0) scale(1); } html[data-theme="light"] .wx-icon-sun{ opacity:1; transform:rotate(0) scale(1); } html[data-theme="light"] .wx-icon-moon{ opacity:0; transform:rotate(90deg) scale(0.6); } .wx-nav-cta{ font-size:13.5px; padding:11px 20px 11px 14px; white-space:nowrap; } .wx-cta-live{ display:inline-flex; align-items:center; gap:5px; background:rgba(255,255,255,0.18); border-radius:100px; padding:4px 9px 4px 7px; font-size:10.5px; font-weight:700; } .wx-cta-live-dot{ width:6px; height:6px; border-radius:50%; background:#fff; } .wx-menu-toggle{ display:none; width:42px; height:42px; border-radius:100px; background:var(--card-bg); border:1px solid var(--card-border); cursor:pointer; position:relative; flex-shrink:0; transition:border-color 0.25s ease, background 0.25s ease; } .wx-menu-toggle span{ position:absolute; left:11px; right:11px; height:2px; border-radius:2px; background:var(--text-primary); transition:transform 0.3s ease, opacity 0.3s ease, top 0.3s ease; } .wx-menu-toggle span:nth-child(1){ top:15px; } .wx-menu-toggle span:nth-child(2){ top:20px; } .wx-menu-toggle span:nth-child(3){ top:25px; } .wx-menu-toggle.wx-open span:nth-child(1){ top:20px; transform:rotate(45deg); } .wx-menu-toggle.wx-open span:nth-child(2){ opacity:0; } .wx-menu-toggle.wx-open span:nth-child(3){ top:20px; transform:rotate(-45deg); } .wx-mobile-panel{ display:none; position:absolute; top:100%; left:0; right:0; background:var(--bg-void); border-bottom:1px solid var(--card-border); border-radius:0 0 20px 20px; transform:scaleY(0); transform-origin:top; opacity:0; visibility:hidden; pointer-events:none; transition:transform 0.25s cubic-bezier(.4,0,.2,1), opacity 0.2s ease, visibility 0.25s ease; will-change:transform, opacity; } .wx-mobile-panel.wx-open{ transform:scaleY(1); opacity:1; visibility:visible; pointer-events:auto; } .wx-mobile-links{ list-style:none; padding:8px clamp(20px,5vw,64px) 22px; display:flex; flex-direction:column; gap:6px; } .wx-mobile-links a{ display:block; padding:13px 16px; font-size:15px; font-weight:500; color:var(--text-muted); text-decoration:none; border-radius:14px; background:var(--card-bg); border:1px solid transparent; transition:color 0.2s ease, background 0.2s ease, border-color 0.2s ease; } .wx-mobile-links a:hover{ color:var(--text-primary); background:var(--card-bg-strong); border-color:rgba(157,92,255,0.3); } .wx-mobile-links .wx-btn{ margin-top:8px; width:100%; } @media (max-width:900px){ .wx-nav-links{ display:none; } .wx-nav-cta{ display:none; } .wx-menu-toggle{ display:block; } .wx-mobile-panel{ display:block; } } @media (max-width:480px){ .wx-header-inner{ height:66px; } .wx-logo{ font-size:18px; } .wx-logo-mark{ width:30px; height:30px; } } /* ========================================================================== HERO ========================================================================== */ .wx-hero{ position:relative; min-height:92vh; overflow:hidden; display:flex; align-items:center; padding:clamp(70px, 9vw, 110px) 0 clamp(60px, 8vw, 90px); background: radial-gradient(ellipse 800px 500px at 15% -10%, rgba(124,58,237,0.28), transparent 60%), radial-gradient(ellipse 700px 600px at 100% 20%, rgba(236,72,153,0.18), transparent 60%), radial-gradient(ellipse 900px 700px at 50% 120%, rgba(124,58,237,0.2), transparent 60%), var(--bg-void); } .wx-hero-grid{ position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0.5; background-image:linear-gradient(rgba(157,92,255,0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(157,92,255,0.07) 1px, transparent 1px); background-size:44px 44px; -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 40%, #000 20%, transparent 90%); mask-image:radial-gradient(ellipse 80% 60% at 50% 40%, #000 20%, transparent 90%); } .wx-hero-container{ position:relative; z-index:2; max-width:1440px; margin:0 auto; width:100%; display:grid; grid-template-columns:1.05fr 0.95fr; gap:clamp(24px, 4vw, 56px); align-items:center; padding:0 clamp(20px, 5vw, 64px); } .wx-hero h1{ font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:clamp(32px, 3.6vw, 52px); line-height:1.1; color:var(--text-primary); margin:20px 0 20px; letter-spacing:-0.02em; } .wx-hero .wx-subhead{ font-size:clamp(15.5px, 1.1vw, 17.5px); line-height:1.65; color:var(--text-muted); max-width:500px; } .wx-hero-cta-row{ display:flex; gap:16px; margin-top:36px; flex-wrap:wrap; } .wx-stage{ position:relative; height:560px; } .wx-hero-card{ position:absolute; background:var(--card-bg-strong); border:1px solid var(--card-border); border-radius:16px; box-shadow:0 20px 60px -20px var(--shadow-color); } .wx-hero-card-main{ width:74%; height:300px; top:10px; left:0; padding:22px; z-index:3; } .wx-dash-topbar{ display:flex; align-items:center; gap:7px; margin-bottom:16px; } .wx-dot{ width:9px; height:9px; border-radius:50%; } .wx-dot.r{background:#ff5f57;} .wx-dot.y{background:#febc2e;} .wx-dot.g{background:#28c840;} .wx-dash-title{ font-family:'JetBrains Mono', monospace; font-size:11.5px; color:var(--text-muted); margin-left:8px; } .wx-dash-stats{ display:flex; gap:22px; margin-bottom:14px; } .wx-stat-label{ font-size:11px; color:var(--text-muted); font-family:'JetBrains Mono', monospace; } .wx-stat-value{ font-family:'Space Grotesk', sans-serif; font-size:22px; color:var(--text-primary); font-weight:600; } .wx-stat-value.up{ color:var(--green); } svg.wx-chart{ width:100%; height:130px; display:block; } .wx-chart-line{ stroke:url(#wxLineGrad); stroke-width:2.5; fill:none; } .wx-chart-fill{ fill:url(#wxAreaGrad); } .wx-hero-card-terminal{ width:56%; height:150px; bottom:0; left:-3%; padding:14px 16px; z-index:4; font-family:'JetBrains Mono', monospace; } .wx-term-title{ font-size:10px; color:var(--text-muted); margin-left:6px; } .wx-term-line{ font-size:11px; line-height:1.8; color:var(--text-muted); white-space:nowrap; overflow:hidden; } .wx-term-line .g{ color:var(--green); } .wx-term-line .p{ color:var(--purple-bright); } .wx-term-caret{ display:inline-block; width:6px; height:11px; background:var(--pink); margin-left:2px; vertical-align:middle; } .wx-hero-card-chat{ width:44%; top:0; right:-2%; padding:14px 16px; z-index:5; } .wx-chat-head{ display:flex; align-items:center; gap:8px; margin-bottom:10px; } .wx-chat-avatar{ width:20px; height:20px; border-radius:50%; background:linear-gradient(135deg,var(--purple-bright),var(--pink)); } .wx-chat-name{ font-size:12px; color:var(--text-primary); font-weight:600; } .wx-chat-bubble{ background:var(--card-bg); border-radius:10px 10px 10px 3px; padding:8px 10px; font-size:11.5px; color:var(--text-muted); line-height:1.4; } .wx-typing-dots{ display:flex; gap:4px; padding:8px 10px; } .wx-typing-dots span{ width:5px; height:5px; border-radius:50%; background:var(--pink); } .wx-typing-dots span:nth-child(2){ opacity:0.7; } .wx-typing-dots span:nth-child(3){ opacity:0.4; } .wx-hero-card-phone{ width:112px; height:220px; bottom:-25px; right:8%; border-radius:22px; padding:8px; z-index:6; } .wx-phone-screen{ width:100%; height:100%; border-radius:15px; overflow:hidden; background:linear-gradient(160deg, #1a1230, #0d0a1c); position:relative; } .wx-phone-notch{ position:absolute; top:6px; left:50%; transform:translateX(-50%); width:34px; height:5px; background:rgba(255,255,255,0.15); border-radius:10px; } .wx-phone-hero{ position:absolute; top:20px; left:10px; right:10px; height:44px; border-radius:8px; background:linear-gradient(100deg, rgba(124,58,237,0.5), rgba(236,72,153,0.4)); } .wx-phone-line{ height:6px; border-radius:4px; background:rgba(255,255,255,0.12); margin:8px 10px; } .wx-phone-line.short{ width:40%; } .wx-chip{ position:absolute; z-index:6; display:flex; align-items:center; gap:6px; background:var(--bg-void); border:1px solid var(--card-border); border-radius:10px; padding:6px 10px; font-family:'JetBrains Mono', monospace; font-size:10.5px; color:var(--green); top:44%; left:2%; } .wx-chip::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 6px var(--green); } @media (max-width:1180px){ .wx-hero-container{ gap:32px; } .wx-stage{ height:500px; } } @media (max-width:980px){ .wx-hero{ align-items:flex-start; padding-top:96px; } .wx-hero-container{ grid-template-columns:1fr; } .wx-hero .wx-subhead{ max-width:none; } .wx-stage{ height:440px; margin-top:28px; } .wx-hero-card-phone{ display:none; } .wx-hero-card-main{ width:100%; height:270px; } .wx-hero-card-terminal{ width:56%; left:0; bottom:-12px; } .wx-hero-card-chat{ width:52%; right:0; } .wx-chip{ display:none; } } @media (max-width:640px){ .wx-hero{ padding:88px 0 56px; } .wx-hero-cta-row{ flex-direction:column; align-items:stretch; } .wx-hero-cta-row .wx-btn{ justify-content:center; } .wx-stage{ height:400px; } .wx-hero-card-main{ height:250px; padding:18px 16px 14px; } .wx-dash-stats{ gap:14px; } .wx-stat-value{ font-size:19px; } .wx-hero-card-terminal{ width:64%; height:135px; padding:12px 14px; } .wx-hero-card-chat{ width:60%; top:2%; } } /* ========================================================================== TRUSTED BY ========================================================================== */ .wx-trusted{ background:var(--bg-deep); border-top:1px solid var(--card-border); } .wx-marquee-panel{ background:var(--card-bg); border:1px solid var(--card-border); border-radius:20px; padding:clamp(28px, 3vw, 36px) 0; } .wx-marquee-wrap{ position:relative; width:100%; -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%); mask-image:linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%); } .wx-marquee-track{ display:flex; width:max-content; gap:20px; animation:wxScrollLeft 30s linear infinite; } .wx-marquee-wrap:hover .wx-marquee-track{ animation-play-state:paused; } @keyframes wxScrollLeft{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } } .wx-logo-item{ display:flex; align-items:center; gap:11px; flex-shrink:0; background:var(--card-bg); border:1px solid var(--card-border); border-radius:14px; padding:14px 26px; transition:transform 0.3s ease, background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } .wx-logo-item svg{ width:24px; height:24px; color:var(--text-primary); opacity:0.9; } .wx-logo-item .wx-logo-name{ font-family:'Space Grotesk', sans-serif; font-weight:600; font-size:19px; color:var(--text-primary); white-space:nowrap; } .wx-logo-item:hover{ transform:translateY(-4px); background:var(--card-bg-strong); border-color:rgba(157,92,255,0.4); box-shadow:0 12px 28px -10px rgba(124,58,237,0.35); } @media (max-width:640px){ .wx-marquee-track{ gap:14px; animation-duration:24s; } .wx-logo-item{ padding:11px 18px; gap:9px; } .wx-logo-item .wx-logo-name{ font-size:16px; } .wx-logo-item svg{ width:19px; height:19px; } } /* ========================================================================== SERVICES ========================================================================== */ .wx-services-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; } .wx-service-card{ background:var(--card-bg); border:1px solid var(--card-border); border-radius:20px; padding:32px 28px; transition:transform 0.35s ease, border-color 0.35s ease, background 0.35s ease, box-shadow 0.35s ease; } .wx-service-card:hover{ transform:translateY(-6px); background:var(--card-bg-strong); } .wx-service-card.web:hover{ border-color:rgba(124,58,237,0.45); box-shadow:0 20px 50px -20px rgba(124,58,237,0.35); } .wx-service-card.seo:hover{ border-color:rgba(16,211,145,0.45); box-shadow:0 20px 50px -20px rgba(16,211,145,0.3); } .wx-service-card.ai:hover{ border-color:rgba(236,72,153,0.45); box-shadow:0 20px 50px -20px rgba(236,72,153,0.35); } .wx-service-icon{ width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center; margin-bottom:22px; } .wx-service-card.web .wx-service-icon{ background:linear-gradient(135deg, rgba(124,58,237,0.25), rgba(124,58,237,0.05)); border:1px solid rgba(124,58,237,0.3); } .wx-service-card.seo .wx-service-icon{ background:linear-gradient(135deg, rgba(16,211,145,0.25), rgba(16,211,145,0.05)); border:1px solid rgba(16,211,145,0.3); } .wx-service-card.ai .wx-service-icon{ background:linear-gradient(135deg, rgba(236,72,153,0.25), rgba(236,72,153,0.05)); border:1px solid rgba(236,72,153,0.3); } .wx-service-icon svg{ width:24px; height:24px; } .wx-service-card.web .wx-service-icon svg{ color:var(--purple-bright); } .wx-service-card.seo .wx-service-icon svg{ color:var(--green); } .wx-service-card.ai .wx-service-icon svg{ color:var(--pink); } .wx-service-card h3{ font-family:'Space Grotesk', sans-serif; font-weight:600; font-size:20px; color:var(--text-primary); margin-bottom:10px; } .wx-service-card p{ font-size:14.5px; line-height:1.65; color:var(--text-muted); margin-bottom:22px; } .wx-service-list{ display:flex; flex-direction:column; gap:9px; margin-bottom:24px; } .wx-service-list-item{ display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--text-muted); } .wx-service-list-item svg{ width:15px; height:15px; flex-shrink:0; } .wx-service-card.web .wx-service-list-item svg{ color:var(--purple-bright); } .wx-service-card.seo .wx-service-list-item svg{ color:var(--green); } .wx-service-card.ai .wx-service-list-item svg{ color:var(--pink); } .wx-service-link{ display:inline-flex; align-items:center; gap:7px; font-weight:600; font-size:13.5px; color:var(--text-primary); cursor:pointer; text-decoration:none; } .wx-service-link svg{ width:14px; height:14px; transition:transform 0.25s ease; } .wx-service-card:hover .wx-service-link svg{ transform:translateX(4px); } @media (max-width:980px){ .wx-services-grid{ grid-template-columns:1fr 1fr; gap:18px; } } @media (max-width:640px){ .wx-services-grid{ grid-template-columns:1fr; gap:16px; } } /* ========================================================================== INDUSTRIES ========================================================================== */ .wx-industries{ background:var(--bg-deep); border-top:1px solid var(--card-border); } .wx-industries-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:18px; } .wx-industry-card{ display:flex; align-items:center; gap:14px; background:var(--card-bg); border:1px solid var(--card-border); border-radius:16px; padding:20px; transition:transform 0.3s ease, border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease; } .wx-industry-card:hover{ transform:translateY(-4px); background:var(--card-bg-strong); border-color:rgba(157,92,255,0.4); box-shadow:0 16px 36px -16px rgba(124,58,237,0.35); } .wx-industry-icon{ flex-shrink:0; width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg, rgba(124,58,237,0.22), rgba(236,72,153,0.1)); border:1px solid rgba(157,92,255,0.28); transition:border-color 0.3s ease, background 0.3s ease; } .wx-industry-card:hover .wx-industry-icon{ background:linear-gradient(135deg, rgba(124,58,237,0.35), rgba(236,72,153,0.2)); border-color:rgba(157,92,255,0.55); } .wx-industry-icon svg{ width:22px; height:22px; color:var(--purple-bright); transition:color 0.3s ease; } .wx-industry-card:hover .wx-industry-icon svg{ color:var(--pink); } .wx-industry-name{ font-family:'Space Grotesk', sans-serif; font-weight:600; font-size:15.5px; color:var(--text-primary); } @media (max-width:1180px){ .wx-industries-grid{ grid-template-columns:repeat(3, 1fr); gap:16px; } } @media (max-width:640px){ .wx-industries-grid{ grid-template-columns:repeat(2, 1fr); gap:12px; } .wx-industry-card{ padding:15px 14px; gap:11px; border-radius:14px; } .wx-industry-icon{ width:38px; height:38px; border-radius:10px; } .wx-industry-icon svg{ width:19px; height:19px; } .wx-industry-name{ font-size:14px; } } /* ========================================================================== COMPARISON ========================================================================== */ .wx-compare-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; max-width:900px; margin:0 auto; } .wx-compare-card{ border-radius:20px; padding:32px 28px; border:1px solid var(--card-border); } .wx-compare-card.old{ background:var(--card-bg); } .wx-compare-card.new{ background:linear-gradient(160deg, rgba(124,58,237,0.14), rgba(236,72,153,0.08)); border-color:rgba(157,92,255,0.4); box-shadow:0 20px 50px -20px rgba(124,58,237,0.35); } .wx-compare-card h3{ font-family:'Space Grotesk', sans-serif; font-weight:600; font-size:19px; margin-bottom:20px; } .wx-compare-card.old h3{ color:var(--text-muted); } .wx-compare-item{ display:flex; align-items:center; gap:10px; font-size:14.5px; margin-bottom:14px; } .wx-compare-card.old .wx-compare-item{ color:var(--text-muted); } .wx-compare-card.new .wx-compare-item{ color:var(--text-primary); } .wx-compare-item svg{ width:18px; height:18px; flex-shrink:0; } .wx-compare-card.old .wx-compare-item svg{ color:var(--red); } .wx-compare-card.new .wx-compare-item svg{ color:var(--green); } @media (max-width:640px){ .wx-compare-grid{ grid-template-columns:1fr; gap:16px; } .wx-compare-card{ padding:26px 22px; } } /* ========================================================================== TESTIMONIALS ========================================================================== */ .wx-testimonials-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; } .wx-testimonial-card{ background:var(--card-bg); border:1px solid var(--card-border); border-radius:22px; padding:36px 30px; transition:transform 0.35s ease, border-color 0.35s ease, background 0.35s ease; } .wx-testimonial-card:hover{ transform:translateY(-6px); background:var(--card-bg-strong); border-color:rgba(157,92,255,0.4); box-shadow:0 20px 50px -20px rgba(124,58,237,0.35); } .wx-quote-mark{ font-family:'Space Grotesk', sans-serif; font-size:52px; line-height:1; margin-bottom:8px; display:block; background:linear-gradient(92deg, var(--purple-bright), var(--pink)); -webkit-background-clip:text; background-clip:text; color:transparent; } .wx-stars{ display:flex; gap:3px; margin-bottom:18px; } .wx-stars svg{ width:18px; height:18px; color:var(--gold); } .wx-testimonial-text{ font-family:'Space Grotesk', sans-serif; font-weight:600; font-size:19px; line-height:1.5; color:var(--text-primary); } @media (max-width:980px){ .wx-testimonials-grid{ grid-template-columns:1fr; max-width:560px; margin:0 auto; gap:18px; } } @media (max-width:640px){ .wx-testimonial-card{ padding:28px 24px; border-radius:18px; } .wx-testimonial-text{ font-size:17px; } .wx-quote-mark{ font-size:44px; } } /* ========================================================================== PROCESS TIMELINE ========================================================================== */ .wx-timeline{ position:relative; max-width:760px; margin:0 auto; padding-left:78px; } .wx-timeline-line{ position:absolute; left:29px; top:6px; bottom:6px; width:2px; background:linear-gradient(180deg, var(--purple), var(--pink) 45%, var(--green)); opacity:0.3; border-radius:2px; } .wx-timeline-step{ position:relative; padding-bottom:clamp(30px, 4vw, 44px); } .wx-timeline-step:last-child{ padding-bottom:0; } .wx-timeline-icon{ position:absolute; left:-78px; top:0; width:60px; height:60px; border-radius:18px; display:flex; align-items:center; justify-content:center; background:var(--card-bg); border:1px solid var(--card-border); z-index:2; transition:transform 0.3s ease, border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease; } .wx-timeline-icon svg{ width:24px; height:24px; color:var(--purple-bright); transition:color 0.3s ease; } .wx-timeline-number{ position:absolute; top:-7px; right:-7px; width:22px; height:22px; border-radius:50%; background:var(--bg-void); border:1px solid var(--card-border); display:flex; align-items:center; justify-content:center; font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:11px; color:var(--text-muted); } .wx-timeline-card{ background:var(--card-bg); border:1px solid var(--card-border); border-radius:18px; padding:20px 24px; transition:transform 0.3s ease, border-color 0.3s ease, background 0.3s ease; } .wx-timeline-card h3{ font-family:'Space Grotesk', sans-serif; font-weight:600; font-size:18px; color:var(--text-primary); margin-bottom:5px; } .wx-timeline-card p{ font-size:13.5px; line-height:1.55; color:var(--text-muted); } .wx-timeline-step:hover .wx-timeline-icon{ border-color:rgba(157,92,255,0.5); background:linear-gradient(135deg, rgba(124,58,237,0.28), rgba(236,72,153,0.14)); transform:scale(1.06); box-shadow:0 0 22px rgba(124,58,237,0.35); } .wx-timeline-step:hover .wx-timeline-icon svg{ color:var(--pink); } .wx-timeline-step:hover .wx-timeline-card{ transform:translateX(6px); background:var(--card-bg-strong); border-color:rgba(157,92,255,0.3); } .wx-timeline-step.acc-green:hover .wx-timeline-icon svg{ color:var(--green); } .wx-timeline-step.acc-green:hover .wx-timeline-icon{ box-shadow:0 0 22px rgba(16,211,145,0.3); border-color:rgba(16,211,145,0.5); } .wx-timeline-step.final .wx-timeline-icon{ background:linear-gradient(135deg, rgba(16,211,145,0.28), rgba(16,211,145,0.08)); border-color:rgba(16,211,145,0.4); } .wx-timeline-step.final .wx-timeline-icon svg{ color:var(--green); } .wx-timeline-step.final .wx-timeline-card h3{ color:var(--green); } @media (max-width:640px){ .wx-timeline{ padding-left:64px; } .wx-timeline-line{ left:23px; } .wx-timeline-icon{ left:-64px; width:48px; height:48px; border-radius:14px; } .wx-timeline-icon svg{ width:20px; height:20px; } .wx-timeline-card{ padding:16px 18px; } .wx-timeline-card h3{ font-size:16px; } } /* ========================================================================== BLOG ========================================================================== */ .wx-blog{ background:var(--bg-deep); border-top:1px solid var(--card-border); } .wx-blog-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; } .wx-blog-card{ background:var(--card-bg); border:1px solid var(--card-border); border-radius:20px; overflow:hidden; text-decoration:none; display:flex; flex-direction:column; transition:transform 0.35s ease, border-color 0.35s ease, background 0.35s ease, box-shadow 0.35s ease; } .wx-blog-card:hover{ transform:translateY(-6px); background:var(--card-bg-strong); border-color:rgba(157,92,255,0.4); box-shadow:0 20px 50px -20px rgba(124,58,237,0.35); } .wx-blog-thumb{ height:170px; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; } .wx-blog-thumb.t1{ background:linear-gradient(135deg, rgba(124,58,237,0.35), rgba(236,72,153,0.18)); } .wx-blog-thumb.t2{ background:linear-gradient(135deg, rgba(16,211,145,0.3), rgba(124,58,237,0.15)); } .wx-blog-thumb.t3{ background:linear-gradient(135deg, rgba(236,72,153,0.32), rgba(16,211,145,0.14)); } .wx-blog-thumb svg{ width:44px; height:44px; color:rgba(255,255,255,0.85); } .wx-blog-thumb::after{ content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 1px); background-size:22px 22px; } .wx-blog-body{ padding:22px 24px 26px; display:flex; flex-direction:column; flex:1; } .wx-blog-tag{ align-self:flex-start; font-family:'JetBrains Mono', monospace; font-size:10.5px; letter-spacing:0.05em; color:var(--green); background:rgba(16,211,145,0.1); border:1px solid rgba(16,211,145,0.28); padding:4px 10px; border-radius:100px; margin-bottom:14px; } .wx-blog-body h3{ font-family:'Space Grotesk', sans-serif; font-weight:600; font-size:18px; color:var(--text-primary); margin-bottom:10px; line-height:1.35; } .wx-blog-body p{ font-size:13.5px; line-height:1.6; color:var(--text-muted); margin-bottom:18px; flex:1; } .wx-blog-meta{ display:flex; align-items:center; justify-content:space-between; font-size:12.5px; color:var(--text-muted); } .wx-blog-read{ display:inline-flex; align-items:center; gap:6px; font-weight:600; color:var(--text-primary); } .wx-blog-read svg{ width:13px; height:13px; transition:transform 0.25s ease; } .wx-blog-card:hover .wx-blog-read svg{ transform:translateX(4px); } @media (max-width:980px){ .wx-blog-grid{ grid-template-columns:1fr 1fr; gap:18px; } } @media (max-width:640px){ .wx-blog-grid{ grid-template-columns:1fr; gap:16px; } } /* ========================================================================== CTA ========================================================================== */ .wx-cta-outer{ padding:clamp(24px, 4vw, 40px) clamp(20px, 5vw, 64px); } .wx-cta-inner{ position:relative; max-width:1440px; margin:0 auto; border-radius:28px; overflow:hidden; padding:clamp(56px, 8vw, 100px) clamp(24px, 6vw, 64px); text-align:center; background: radial-gradient(ellipse 700px 500px at 15% 0%, rgba(255,255,255,0.14), transparent 60%), radial-gradient(ellipse 700px 500px at 85% 100%, rgba(0,0,0,0.18), transparent 60%), linear-gradient(115deg, var(--purple) 0%, #9B3FDB 45%, var(--pink) 100%); } .wx-cta-content{ position:relative; z-index:1; max-width:680px; margin:0 auto; } .wx-cta-badge{ display:inline-flex; align-items:center; gap:8px; font-family:'JetBrains Mono', monospace; font-size:12px; letter-spacing:0.08em; color:#fff; background:rgba(255,255,255,0.16); border:1px solid rgba(255,255,255,0.3); padding:6px 14px; border-radius:100px; margin-bottom:22px; } .wx-cta-badge-dot{ width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 8px var(--green); } .wx-cta-content h2{ font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:clamp(28px, 4vw, 46px); line-height:1.15; color:#fff; letter-spacing:-0.02em; margin-bottom:18px; } .wx-cta-content p{ font-size:clamp(15px, 1.4vw, 17.5px); line-height:1.65; color:#D8D3EE; margin-bottom:36px; } .wx-cta-buttons{ display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap; margin-bottom:28px; } .wx-cta-btn-primary{ background:#fff; color:var(--purple); box-shadow:0 10px 30px -8px rgba(0,0,0,0.35); } .wx-cta-btn-primary:hover{ transform:translateY(-3px); box-shadow:0 16px 36px -8px rgba(0,0,0,0.4); } .wx-cta-btn-ghost{ background:rgba(255,255,255,0.12); color:#fff; border:1px solid rgba(255,255,255,0.35); } .wx-cta-btn-ghost:hover{ background:rgba(255,255,255,0.2); transform:translateY(-3px); } .wx-cta-trust{ display:flex; align-items:center; justify-content:center; gap:26px; flex-wrap:wrap; } .wx-cta-trust-item{ display:flex; align-items:center; gap:7px; font-size:13px; font-weight:500; color:rgba(255,255,255,0.85); } .wx-cta-trust-item svg{ width:16px; height:16px; color:#fff; flex-shrink:0; } @media (max-width:640px){ .wx-cta-outer{ padding:16px; } .wx-cta-inner{ border-radius:22px; padding:48px 22px; } .wx-cta-buttons{ flex-direction:column; align-items:stretch; } .wx-cta-buttons .wx-btn{ justify-content:center; } .wx-cta-trust{ gap:14px 20px; } } /* ========================================================================== CONTACT / QUOTE FORM ========================================================================== */ .wx-contact{ background:var(--bg-deep); border-top:1px solid var(--card-border); } .wx-form-wrapper{ width:100%; max-width:700px; margin:0 auto; background:var(--card-bg); border:1px solid var(--card-border); border-radius:26px; padding:clamp(28px, 4vw, 46px); box-shadow:0 30px 90px -30px var(--shadow-color); } .wx-progress-track{ position:relative; display:flex; justify-content:space-between; margin-bottom:36px; } .wx-progress-track::before{ content:''; position:absolute; top:18px; left:0; right:0; height:2px; background:var(--card-border); z-index:0; } .wx-progress-fill{ position:absolute; top:18px; left:0; height:2px; width:0%; background:linear-gradient(90deg, var(--purple-bright), var(--pink)); z-index:1; transition:width 0.5s cubic-bezier(.4,0,.2,1); } .wx-progress-step{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:8px; flex:1; } .wx-progress-circle{ width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--bg-void); border:2px solid var(--card-border); font-family:'Space Grotesk', sans-serif; font-weight:600; font-size:14px; color:var(--text-muted); transition:border-color 0.35s ease, background 0.35s ease, color 0.35s ease, transform 0.35s ease; } .wx-progress-label{ font-size:11.5px; color:var(--text-muted); font-weight:500; transition:color 0.3s ease; } .wx-progress-step.active .wx-progress-circle{ border-color:var(--purple-bright); background:linear-gradient(135deg, var(--purple), var(--pink)); color:#fff; transform:scale(1.1); } .wx-progress-step.completed .wx-progress-circle{ border-color:var(--green); background:rgba(16,211,145,0.15); color:var(--green); } .wx-progress-step.active .wx-progress-label, .wx-progress-step.completed .wx-progress-label{ color:var(--text-primary); } .wx-form-step{ display:none; } .wx-form-step.active{ display:block; } .wx-field{ margin-bottom:20px; } .wx-field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; } .wx-field-row .wx-field{ margin-bottom:0; } .wx-contact label{ display:block; font-size:13.5px; font-weight:500; color:var(--text-muted); margin-bottom:8px; } .wx-req{ color:var(--pink); } .wx-contact input, .wx-contact select, .wx-contact textarea{ width:100%; background:var(--input-bg); border:1px solid var(--card-border); border-radius:12px; padding:13px 15px; font-size:14.5px; color:var(--text-primary); transition:border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease; } .wx-contact input:focus, .wx-contact select:focus, .wx-contact textarea:focus{ outline:none; border-color:var(--purple-bright); box-shadow:0 0 0 3px rgba(124,58,237,0.18); } .wx-contact textarea{ resize:vertical; min-height:90px; } .wx-contact select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%239C9AB5' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 15px center; padding-right:38px; } .wx-contact input.invalid, .wx-contact select.invalid, .wx-contact textarea.invalid{ border-color:var(--red); box-shadow:0 0 0 3px rgba(241,90,90,0.14); } .wx-error-msg{ display:block; font-size:12.5px; color:var(--red); margin-top:6px; min-height:15px; opacity:0; transition:opacity 0.2s ease; } .wx-error-msg.show{ opacity:1; } .wx-option-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; } .wx-option-grid.wx-option-4{ grid-template-columns:repeat(4, 1fr); } .wx-option{ position:relative; cursor:pointer; background:var(--input-bg); border:1px solid var(--card-border); border-radius:14px; padding:16px 14px; text-align:center; transition:transform 0.25s ease, border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease; } .wx-option:hover{ transform:translateY(-3px); border-color:rgba(157,92,255,0.35); } .wx-option svg{ width:24px; height:24px; margin:0 auto 8px; display:block; color:var(--purple-bright); transition:color 0.25s ease, transform 0.25s ease; } .wx-option-title{ font-family:'Space Grotesk', sans-serif; font-weight:600; font-size:13.5px; color:var(--text-primary); } .wx-option.selected{ border-color:var(--purple-bright); background:linear-gradient(160deg, rgba(124,58,237,0.22), rgba(236,72,153,0.1)); box-shadow:0 12px 28px -12px rgba(124,58,237,0.5); } .wx-option.selected svg{ color:var(--pink); transform:scale(1.1); } .wx-option-check{ position:absolute; top:8px; right:8px; width:16px; height:16px; border-radius:50%; background:var(--green); display:flex; align-items:center; justify-content:center; opacity:0; transform:scale(0.5); transition:opacity 0.25s ease, transform 0.25s ease; } .wx-option.selected .wx-option-check{ opacity:1; transform:scale(1); } .wx-option-check svg{ width:10px; height:10px; margin:0; color:#fff; } .wx-form-nav{ display:flex; justify-content:space-between; gap:14px; margin-top:32px; } .wx-form-nav .wx-btn{ flex:1; } .wx-btn:disabled{ opacity:0.5; cursor:not-allowed; transform:none; } .wx-spinner{ width:16px; height:16px; border-radius:50%; border:2px solid rgba(255,255,255,0.35); border-top-color:#fff; animation:wxSpin 0.8s linear infinite; } @keyframes wxSpin{ to{ transform:rotate(360deg); } } .wx-modal-overlay{ position:fixed; inset:0; z-index:2000; background:rgba(6,5,14,0.72); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; padding:20px; opacity:0; visibility:hidden; transition:opacity 0.3s ease, visibility 0.3s ease; } .wx-modal-overlay.open{ opacity:1; visibility:visible; } .wx-modal{ width:100%; max-width:480px; background:var(--bg-void); border:1px solid var(--card-border); border-radius:22px; padding:clamp(26px, 4vw, 34px); position:relative; transform:scale(0.9) translateY(20px); opacity:0; transition:transform 0.4s cubic-bezier(.2,.9,.25,1.15), opacity 0.3s ease; max-height:85vh; overflow-y:auto; } .wx-modal-overlay.open .wx-modal{ transform:scale(1) translateY(0); opacity:1; } .wx-modal-close{ position:absolute; top:16px; right:18px; background:none; border:none; color:var(--text-muted); font-size:26px; line-height:1; cursor:pointer; } .wx-modal-close:hover{ color:var(--text-primary); } .wx-modal h2{ font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:22px; } .wx-modal-summary{ display:flex; flex-direction:column; gap:12px; margin:22px 0 26px; } .wx-summary-row{ display:flex; justify-content:space-between; gap:16px; padding-bottom:12px; border-bottom:1px solid var(--card-border); font-size:14px; } .wx-summary-row:last-child{ border-bottom:none; padding-bottom:0; } .wx-summary-label{ color:var(--text-muted); flex-shrink:0; } .wx-summary-value{ color:var(--text-primary); font-weight:500; text-align:right; word-break:break-word; } .wx-modal-actions{ display:flex; gap:12px; } .wx-toast{ position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px); display:flex; align-items:center; gap:10px; background:var(--bg-void); border:1px solid rgba(16,211,145,0.35); color:var(--text-primary); font-size:14px; font-weight:500; padding:14px 20px; border-radius:14px; box-shadow:0 20px 50px -15px var(--shadow-color); z-index:2001; opacity:0; visibility:hidden; transition:opacity 0.35s ease, transform 0.35s ease, visibility 0.35s ease; } .wx-toast svg{ width:20px; height:20px; color:var(--green); flex-shrink:0; } .wx-toast.show{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); } .wx-toast-error{ border-color:rgba(241,90,90,0.35); } .wx-toast-error svg{ color:var(--red); } @media (max-width:640px){ .wx-field-row{ grid-template-columns:1fr; gap:0; } .wx-progress-label{ display:none; } .wx-form-nav{ flex-wrap:wrap; } .wx-option-grid.wx-option-4{ grid-template-columns:1fr 1fr; } .wx-toast{ width:calc(100% - 32px); left:16px; right:16px; } } /* ========================================================================== FOOTER ========================================================================== */ .wx-footer{ position:relative; background:var(--bg-void); padding-top:clamp(56px, 7vw, 84px); border-top:1px solid var(--card-border); } .wx-footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:32px; padding-bottom:48px; } .wx-footer-logo{ display:flex; align-items:center; gap:10px; font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:20px; color:var(--text-primary); text-decoration:none; margin-bottom:16px; } .wx-footer-desc{ font-size:14px; line-height:1.65; color:var(--text-muted); max-width:320px; margin-bottom:22px; } .wx-social-row{ display:flex; gap:10px; } .wx-social-icon{ width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center; background:var(--card-bg); border:1px solid var(--card-border); color:var(--text-muted); text-decoration:none; transition:border-color 0.25s ease, color 0.25s ease, background 0.25s ease, transform 0.25s ease; } .wx-social-icon svg{ width:16px; height:16px; } .wx-social-icon:hover{ color:#fff; transform:translateY(-3px); background:linear-gradient(135deg, var(--purple), var(--pink)); border-color:transparent; } .wx-footer-col h4{ font-family:'Space Grotesk', sans-serif; font-weight:600; font-size:14.5px; color:var(--text-primary); margin-bottom:20px; } .wx-footer-col ul{ display:flex; flex-direction:column; gap:12px; } .wx-footer-col a{ font-size:14px; color:var(--text-muted); text-decoration:none; transition:color 0.2s ease, padding-left 0.2s ease; } .wx-footer-col a:hover{ color:var(--text-primary); padding-left:4px; } .wx-contact-item{ display:flex; align-items:flex-start; gap:10px; font-size:14px; color:var(--text-muted); margin-bottom:14px; line-height:1.5; } .wx-contact-item svg{ width:17px; height:17px; flex-shrink:0; margin-top:2px; color:var(--purple-bright); } .wx-contact-item a{ color:inherit; text-decoration:none; } .wx-contact-item a:hover{ color:var(--text-primary); } .wx-footer-bottom{ border-top:1px solid var(--card-border); padding:22px 0; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; } .wx-footer-bottom p{ font-size:13px; color:var(--text-muted); } .wx-legal-links{ display:flex; gap:22px; } .wx-legal-links a{ font-size:13px; color:var(--text-muted); text-decoration:none; } .wx-legal-links a:hover{ color:var(--text-primary); } @media (max-width:1024px){ .wx-footer-grid{ grid-template-columns:1fr 1fr; row-gap:36px; } } @media (max-width:640px){ .wx-footer-grid{ grid-template-columns:1fr; gap:32px; padding-bottom:36px; } .wx-footer-desc{ max-width:none; } .wx-footer-bottom{ flex-direction:column; align-items:flex-start; padding:20px 0; } } /* ========================================================================== Global responsive helpers ========================================================================== */ @media (max-width:400px){ .wx-container{ padding:0 16px; } }