.blog-pagination {
margin-top: 60px;
display: flex;
justify-content: center;
}
.blog-pagination .screen-reader-text {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
.blog-pagination .nav-links {
display: flex;
gap: 8px;
align-items: center;
font-family: 'Inter', sans-serif;
}
.blog-pagination .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
height: 44px;
padding: 0 14px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
color: #E8E8E8;
font-size: 14px;
font-weight: 600;
text-decoration: none;
transition: all 0.2s ease;
}
.blog-pagination .page-numbers:hover {
background: rgba(255, 210, 74, 0.12);
border-color: rgba(255, 210, 74, 0.35);
color: #FFD24A;
}
.blog-pagination .page-numbers.current {
background: #FFD24A;
border-color: #FFD24A;
color: #05080F;
}
.blog-pagination .page-numbers.dots {
background: transparent;
border: none;
color: rgba(255, 255, 255, 0.4);
}
.blog-pagination .prev,
.blog-pagination .next {
font-size: 18px;
}
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=DM+Serif+Display:ital@0;1&family=Inter:wght@300;400;500;600;700&family=Syne:wght@400;500;600;700;800&family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500&family=JetBrains+Mono:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600&display=swap");
:root { --bg: #05080F;
--bg-2: #0A1220;
--surface: #0E1729;
--surface-2: #131F38;
--line: rgba(180, 210, 255, 0.08);
--line-2: rgba(180, 210, 255, 0.16);
--ink: #E8EEFC;
--ink-2: #A9B6CE;
--ink-3: #6B7A96; --accent: #FFD24A; --accent-2: #E6A400;
--accent-glow: rgba(255, 210, 74, 0.35);
--blue: #4DA3FF;
--blue-2: #1E88E5;
--blue-glow: rgba(77, 163, 255, 0.15);
--green: #34D399;
--red: #F87171; --font-display: 'DM Serif Display', Georgia, serif;
--font-sans: 'Space Grotesk', system-ui, sans-serif;
--font-mono: 'IBM Plex Mono', 'JetBrains Mono', monospace;
--container: 1280px;
--r-sm: 10px;
--r: 18px;
--r-lg: 28px;
} body[data-theme="light"] {
--bg: #F6F7FB;
--bg-2: #ECEFF6;
--surface: #FFFFFF;
--surface-2: #F2F5FB;
--line: rgba(11, 30, 63, 0.10);
--line-2: rgba(11, 30, 63, 0.18);
--ink: #0A1628;
--ink-2: #334155;
--ink-3: #64748B;
--accent: #E6B233;
--accent-2: #C99220;
--blue-glow: rgba(77, 163, 255, 0.18);
--accent-glow: rgba(230, 178, 51, 0.25);
} body[data-theme="light"] .bg3d::before {
background:
radial-gradient(1000px 600px at 15% 10%, rgba(77,163,255,.10), transparent 60%),
radial-gradient(900px 600px at 85% 85%, rgba(212,165,60,.08), transparent 60%);
}
body[data-theme="light"] .bg3d-orbs .orb { opacity: .35; }
body[data-theme="light"] .bg3d-streams .stream,
body[data-theme="light"] .bg3d-streams i.stream { opacity: .25; } body[data-theme="light"] .v1-monitor,
body[data-theme="light"] .v1-monitor-screen { background: #FFFFFF !important; box-shadow: 0 30px 60px -20px rgba(11,30,63,.18), inset 0 0 0 1px rgba(11,30,63,.08) !important; }
body[data-theme="light"] .hv-glow { background: radial-gradient(circle at 30% 30%, rgba(77,163,255,.45), rgba(212,165,60,.18) 60%, transparent 100%) !important; } body[data-theme="light"] .v2-tablet,
body[data-theme="light"] .v3-screen,
body[data-theme="light"] .v3-card,
body[data-theme="light"] .v4-panel {
background: linear-gradient(180deg, #FFFFFF, #F2F5FB) !important;
box-shadow: 0 25px 50px -16px rgba(11,30,63,.22), inset 0 0 0 1px rgba(11,30,63,.10) !important;
color: var(--ink) !important;
}
body[data-theme="light"] .v2-tablet-code,
body[data-theme="light"] .v3-code,
body[data-theme="light"] .v4-code { color: var(--ink) !important; }
body[data-theme="light"] .v2-tablet-head,
body[data-theme="light"] .v3-head { color: var(--ink-3) !important; border-bottom-color: var(--line) !important; } body[data-theme="light"] .diag-orb::after { border-color: rgba(11,30,63,.20) !important; } body[data-theme="light"] .hero-picker button.active,
body[data-theme="light"] .socials a:hover,
body[data-theme="light"] .tweaks .opt.active { color: #0B1220 !important; } body[data-theme="light"] .card,
body[data-theme="light"] .stat-card,
body[data-theme="light"] .stat-block,
body[data-theme="light"] .why-item,
body[data-theme="light"] .product-card,
body[data-theme="light"] .product-thumb,
body[data-theme="light"] .pricing-card,
body[data-theme="light"] .price-card,
body[data-theme="light"] .faq-item,
body[data-theme="light"] .testimonial,
body[data-theme="light"] .blog-card,
body[data-theme="light"] .contact-wrap {
background: #FFFFFF !important;
border: 1px solid #E2E6EE !important;
box-shadow:
0 1px 2px rgba(11, 30, 63, 0.04),
0 6px 16px rgba(11, 30, 63, 0.06) !important;
} body[data-theme="light"] .product-card:hover,
body[data-theme="light"] .blog-card:hover {
box-shadow:
0 2px 4px rgba(11, 30, 63, 0.06),
0 12px 28px rgba(11, 30, 63, 0.10) !important;
border-color: #D4A53C !important;
} body[data-theme="light"] .footer { background: #EEF1F8; }
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
font-family: var(--font-sans);
background: var(--bg);
color: var(--ink);
line-height: 1.55;
-webkit-font-smoothing: antialiased;
overflow-x: clip;
min-height: 100vh;
padding-top: 72px;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
input, textarea, select { font: inherit; }
.container { max-width: var(--container); margin: 0 auto; padding: 0 28px; position: relative; z-index: 2; } .bg3d {
position: fixed; inset: 0;
z-index: 0;
pointer-events: none;
overflow: hidden;
perspective: 1200px;
}
.bg3d::before {
content: '';
position: absolute; inset: 0;
background:
radial-gradient(1000px 600px at 15% 10%, rgba(77,163,255,.18), transparent 60%),
radial-gradient(900px 600px at 85% 85%, rgba(255,210,74,.12), transparent 60%);
}
.bg3d-grid {
position: absolute; inset: -30% -30%;
background-image:
linear-gradient(var(--line) 1px, transparent 1px),
linear-gradient(90deg, var(--line) 1px, transparent 1px);
background-size: 60px 60px;
transform: rotateX(55deg) translateY(25%);
transform-origin: 50% 50%;
mask-image: linear-gradient(180deg, transparent, #000 25%, #000 70%, transparent);
-webkit-mask-image: linear-gradient(180deg, transparent, #000 25%, #000 70%, transparent);
animation: gridShift 40s linear infinite;
}
@keyframes gridShift {
0%   { background-position: 0 0; }
100% { background-position: 0 60px; }
} .bg3d-float { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }
.bg3d-float .chip {
position: absolute;
top: 50%;
left: 50%;
font-family: var(--font-mono);
font-size: 11.5px;
padding: 6px 10px;
border-radius: 8px;
background: var(--surface);
color: var(--ink-2);
box-shadow:
0 10px 30px -12px rgba(0,0,0,.55),
inset 0 0 0 1px var(--line-2);
white-space: nowrap;
opacity: 0;
animation: floatChip 60s linear infinite;
will-change: transform, opacity;
}
.bg3d-float .chip .k { color: var(--blue); }
.bg3d-float .chip .s { color: var(--accent); }
.bg3d-float .chip .up { color: var(--green); }
.bg3d-float .chip .dn { color: var(--red); }
@keyframes floatChip {
0%   { transform: translate3d(var(--x,0), 55vh, var(--z,0)); opacity: 0; }
12%  { opacity: .85; }
88%  { opacity: .85; }
100% { transform: translate3d(var(--x,0), -60vh, var(--z,0)); opacity: 0; }
}
body[data-theme="light"] .bg3d-float .chip { background: #fff; color: var(--ink-2); } .bg3d-orbs { position: absolute; inset: 0; pointer-events: none; }
.bg3d-orbs .orb {
position: absolute; border-radius: 50%;
filter: blur(50px); opacity: .5;
animation: orbDrift 24s ease-in-out infinite;
}
.bg3d-orbs .orb.o1 { width: 420px; height: 420px; left: -120px; top: 10%; background: var(--blue-glow); }
.bg3d-orbs .orb.o2 { width: 380px; height: 380px; right: -100px; top: 40%; background: var(--accent-glow); animation-delay: -8s; animation-duration: 28s; }
.bg3d-orbs .orb.o3 { width: 340px; height: 340px; left: 35%; bottom: -80px; background: rgba(52,211,153,.18); animation-delay: -14s; animation-duration: 32s; }
@keyframes orbDrift {
0%,100% { transform: translate(0,0) scale(1); }
50%     { transform: translate(40px,-30px) scale(1.1); }
}
.bg3d-streams { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.bg3d-streams .stream {
position: absolute;
width: 1px;
height: 120px;
background: linear-gradient(180deg, transparent, var(--blue), transparent);
opacity: .4;
animation: streamFall 14s linear infinite;
filter: drop-shadow(0 0 3px var(--blue-glow));
}
.bg3d-streams i.stream { position: absolute;
width: 1px;
height: 120px;
background: linear-gradient(180deg, transparent, var(--blue), transparent);
opacity: .4;
animation: streamFall 14s linear infinite;
filter: drop-shadow(0 0 6px var(--blue-glow));
display: block;
}
.bg3d-streams i.stream.g { background: linear-gradient(180deg, transparent, var(--accent), transparent); filter: drop-shadow(0 0 6px var(--accent-glow)); }
.bg3d-streams .stream.g { background: linear-gradient(180deg, transparent, var(--accent), transparent); filter: drop-shadow(0 0 6px var(--accent-glow)); }
@keyframes streamFall {
0%   { transform: translateY(-20vh); opacity: 0; }
20%  { opacity: .6; }
80%  { opacity: .6; }
100% { transform: translateY(120vh); opacity: 0; }
} .eyebrow {
display: inline-flex; align-items: center; gap: 10px;
font-family: var(--font-mono);
font-size: 11px; font-weight: 500;
color: var(--accent);
text-transform: uppercase; letter-spacing: 0.2em;
}
.eyebrow::before { content:''; width:22px; height:1px; background: currentColor; }
.display {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(54px, 5.4vw, 74.3px);
line-height: 1.02;
letter-spacing: -0.025em;
color: var(--ink);
}
.display em { font-style: italic; color: var(--accent); }
.display .blue { color: var(--blue); font-style: italic; }
.section-title {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(32px, 4.2vw, 60px);
line-height: 1.05;
letter-spacing: -0.02em;
color: var(--ink);
}
.section-title em { font-style: italic; color: var(--accent); }
h3, h4, h5 { color: var(--ink); font-weight: 500; }
.lead { font-size: 17.5px; color: var(--ink-2); line-height: 1.7; max-width: 620px; }
.page-hero .lead, .hero .lead, .hero-desc { color: var(--ink); opacity: 0.85; } .btn {
display: inline-flex; align-items: center; gap: 10px;
padding: 14px 22px;
border-radius: 999px;
font-weight: 600; font-size: 14.5px;
transition: transform .2s ease, box-shadow .3s ease, background .2s ease;
will-change: transform;
position: relative;
z-index: 1;
}
.btn:hover { transform: translateY(-2px); }
.btn .arrow { transition: transform .25s ease; }
.btn:hover .arrow { transform: translateX(4px); }
.btn-primary {
background: linear-gradient(180deg, var(--accent), var(--accent-2));
color: #0B1220;
box-shadow: 0 10px 30px -8px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,.45);
}
.btn-primary:hover { box-shadow: 0 16px 40px -8px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,.6); }
.btn-secondary {
background: transparent;
color: var(--ink);
box-shadow: inset 0 0 0 1px var(--line-2);
}
.btn-secondary:hover { box-shadow: inset 0 0 0 1px var(--ink); background: var(--surface); }
.btn-blue {
background: linear-gradient(180deg, var(--blue), var(--blue-2));
color: #fff;
box-shadow: 0 10px 30px -8px var(--blue-glow), inset 0 1px 0 rgba(255,255,255,.3);
} .navbar {
position: fixed; top: 0; left: 0; right: 0; z-index: 110;
background: color-mix(in oklab, var(--bg) 70%, transparent);
backdrop-filter: blur(18px) saturate(140%);
-webkit-backdrop-filter: blur(18px) saturate(140%);
border-bottom: 1px solid var(--line);
}
.nav-inner {
max-width: var(--container); margin: 0 auto;
padding: 14px 28px;
display: flex; align-items: center; justify-content: space-between; gap: 36px;
}
.nav-logo { display: flex; align-items: center; gap: 10px; }
.nav-logo img { height: 44px; width: auto; display: block; }
.nav-logo-icon { height: 44px !important; width: auto; display: block; flex-shrink: 0; }
.nav-logo-text {
font-family: var(--font-display); font-size: 22px; letter-spacing: -0.02em; color: var(--ink);
}
.nav-logo-text em { font-style: italic; color: var(--accent); }
.nav-links { display: flex; gap: 2px; list-style: none; align-items: center; }
.nav-links a {
padding: 8px 14px; border-radius: 10px;
font-size: 14px; font-weight: 500; color: var(--ink-2);
transition: all .2s ease;
}
.nav-links a:hover, .nav-links a.active { color: var(--ink); background: var(--surface); }
.nav-links a.nav-home { display: inline-flex; align-items: center; justify-content: center; padding: 8px 12px; }
.nav-links a.nav-home svg { display: block; }
.nav-cta { display: flex; gap: 10px; align-items: center; }
.mobile-toggle { display: none; font-size: 22px; color: var(--ink); } .theme-toggle {
display: inline-flex; align-items: center; justify-content: center;
width: 38px; height: 38px;
background: var(--surface);
color: var(--ink);
border-radius: 10px;
box-shadow: inset 0 0 0 1px var(--line-2);
cursor: pointer;
transition: all .2s ease;
}
.theme-toggle:hover { color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.theme-toggle .ti-sun { display: none; }
.theme-toggle .ti-moon { display: block; }
body[data-theme="light"] .theme-toggle .ti-sun  { display: block; }
body[data-theme="light"] .theme-toggle .ti-moon { display: none; }
@media (max-width: 980px) {
.nav-links { display: none; }
.mobile-toggle { display: inline-flex; }
} .hero {
position: relative;
padding: 60px 0 40px;
overflow: visible;
}
.hero-inner {
max-width: var(--container); margin: 0 auto; padding: 0 28px;
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 56px;
align-items: center;
min-height: 640px;
position: relative; z-index: 2;
}
@media (max-width: 1024px) {
.hero-inner { grid-template-columns: 1fr; }
}
.hero-tag {
display: inline-flex; align-items: center; gap: 10px;
padding: 8px 14px; border-radius: 999px;
background: var(--surface);
box-shadow: inset 0 0 0 1px var(--line-2);
font-family: var(--font-mono);
font-size: 12px; color: var(--ink-2);
margin-bottom: 22px;
letter-spacing: 0.02em;
}
.hero-tag .dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--green);
box-shadow: 0 0 0 4px rgba(52,211,153,.18);
animation: pulse 2s infinite;
}
@keyframes pulse {
0%,100% { box-shadow: 0 0 0 4px rgba(52,211,153,.18); }
50%     { box-shadow: 0 0 0 9px rgba(52,211,153,0); }
}
.hero-desc { font-size: 18px; color: var(--ink); opacity: 0.85; line-height: 1.7; max-width: 540px; margin: 22px 0 30px; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 48px; }
.hero-trust { display: flex; gap: 40px; }
.hero-trust-item .n {
font-family: var(--font-display); font-size: 42px; color: var(--ink); line-height: 1;
}
.hero-trust-item .n em { font-style: italic; color: var(--accent); }
.hero-trust-item .l { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); margin-top: 6px; letter-spacing: .1em; text-transform: uppercase; }
.fade-up { animation: fadeUp .7s cubic-bezier(.2,.7,.2,1) both; }
.fade-up.d1 { animation-delay: .04s; }
.fade-up.d2 { animation-delay: .12s; }
.fade-up.d3 { animation-delay: .20s; }
.fade-up.d4 { animation-delay: .28s; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } .hero-visual {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
max-width: 560px;
margin-left: auto;
perspective: 1400px;
perspective-origin: 50% 45%;
}
.hv-scene { position: absolute; inset: 0; transform-style: preserve-3d; }
.hv-scene[hidden] { display: none; } .hv-glow {
position: absolute; left: 50%; top: 50%;
width: 65%; height: 65%; transform: translate(-50%,-50%);
background: radial-gradient(circle, var(--blue-glow), transparent 60%);
filter: blur(40px);
z-index: 0;
animation: pulseGlow 6s ease-in-out infinite;
opacity: 0.55;
}
@keyframes pulseGlow { 0%,100% { opacity: .35; } 50% { opacity: .55; } } .v1 { animation: v1Tilt 14s ease-in-out infinite; transform-style: preserve-3d; }
@keyframes v1Tilt {
0%,100% { transform: rotateX(-14deg) rotateY(-10deg); }
50%     { transform: rotateX(-14deg) rotateY(10deg); }
}
.v1-rings { position: absolute; inset: 10%; transform-style: preserve-3d; }
.v1-rings .ring {
position: absolute; inset: 0; border-radius: 50%;
border: 1px solid var(--blue-glow);
box-shadow: 0 0 40px rgba(77,163,255,.18) inset;
}
.v1-rings .r2 { transform: rotateY(60deg); border-color: var(--accent-glow); }
.v1-rings .r3 { transform: rotateY(120deg) rotateX(30deg); border-color: rgba(77,163,255,.45); }
.v1-rings .r4 { transform: rotateX(70deg); border-style: dashed; }
.v1-core {
position: absolute; left: 50%; top: 50%;
width: 180px; height: 180px; margin: -90px 0 0 -90px;
border-radius: 50%;
background: radial-gradient(circle at 30% 30%, #4DA3FF, #0D47A1 60%, #050B1B 100%);
box-shadow: 0 0 80px var(--blue-glow), inset 10px 10px 40px rgba(77,163,255,.45);
transform-style: preserve-3d;
}
.v1-core::after {
content: 'MQL';
position: absolute; inset: 0; display: grid; place-items: center;
font-family: var(--font-display); font-style: italic; font-size: 54px;
color: #fff; text-shadow: 0 0 20px rgba(255,255,255,.5);
}
.v1-candles { position: absolute; inset: 0; transform-style: preserve-3d; animation: v1Spin 22s linear infinite; }
@keyframes v1Spin { to { transform: rotateY(360deg); } }
.v1-candle {
position: absolute; left: 50%; top: 50%;
width: 10px;
background: linear-gradient(180deg, var(--accent), var(--accent-2));
border-radius: 3px;
box-shadow: 0 0 12px var(--accent-glow);
}
.v1-candle.b { background: linear-gradient(180deg, var(--blue), #0D47A1); box-shadow: 0 0 12px var(--blue-glow); } .v2 { animation: v2Float 8s ease-in-out infinite; transform-style: preserve-3d; }
@keyframes v2Float {
0%,100% { transform: translateY(0); }
50%     { transform: translateY(-14px); }
}
.v2-robot-wrap { position: absolute; inset: 0; } .v2-robot {
position: absolute;
left: -6%;
top: 50%;
transform: translateY(-50%);
width: 392px;
max-width: 392px;
height: auto;
filter: drop-shadow(0 30px 50px rgba(77,163,255,.35));
}
.v2-robot .eye { animation: blink 4s infinite; transform-origin: center; }
@keyframes blink { 0%,94%,100% { transform: scaleY(1); } 97% { transform: scaleY(0.1); } }
.v2-robot .arm-wave { transform-origin: 39px 152px; animation: wave 2.4s ease-in-out infinite; }
@keyframes wave { 0%,100% { transform: rotate(-10deg); } 50% { transform: rotate(22deg); } }
.v2-robot .arm-hold { transform-origin: 221px 162px; animation: hold 5s ease-in-out infinite; }
@keyframes hold { 0%,100% { transform: rotate(-4deg); } 50% { transform: rotate(2deg); } } .v2-tablet {
position: absolute;
right: 0;
top: 46%;
transform: translateY(-50%) rotate(-4deg);
width: 181px;
max-width: 40%;
min-height: 194px;
background: linear-gradient(180deg, #0E2553, #050B1B);
border-radius: 14px;
padding: 20px 14px 14px;
box-shadow: 0 25px 50px -16px rgba(0,0,0,.6), inset 0 0 0 1px rgba(77,163,255,.25);
animation: tabletFloat 6s ease-in-out infinite;
z-index: 2;
}
@keyframes tabletFloat {
0%,100% { transform: translateY(-50%) rotate(-4deg); }
50%     { transform: translateY(calc(-50% - 8px)) rotate(-2deg); }
}
.v2-tablet-head { display: flex; align-items: center; gap: 5px; padding-bottom: 8px; border-bottom: 1px solid rgba(77,163,255,.14); font-family: var(--font-mono); font-size: 10px; color: #8FB8E8; }
.v2-tablet-head span { width: 7px; height: 7px; border-radius: 50%; background: #FF5F56; }
.v2-tablet-head span:nth-child(2) { background: #FFBD2E; }
.v2-tablet-head span:nth-child(3) { background: #27C93F; }
.v2-tablet-head em { margin-left: auto; font-style: normal; color: var(--accent); }
.v2-tablet-code { padding-top: 10px; font-family: var(--font-mono); font-size: 11.5px; line-height: 1.55; color: #E8EEFC; }
.v2-tablet-code .k { color: #4DA3FF; }
.v2-tablet-code .s { color: #FFD24A; }
.v2-tablet-code .ok { margin-top: 6px; padding-top: 6px; border-top: 1px dashed rgba(77,163,255,.2); color: #27C93F; font-size: 10px; }
.v2-chips { position: absolute; inset: 0; pointer-events: none; }
.v2-chip {
position: absolute;
background: var(--surface);
box-shadow: 0 10px 30px -10px rgba(0,0,0,.5), inset 0 0 0 1px var(--line-2);
padding: 7px 11px; border-radius: 10px;
font-family: var(--font-mono); font-size: 11px; color: var(--ink-2);
animation: chipFloat 5s ease-in-out infinite;
}
.v2-chip em { color: var(--accent); font-style: normal; font-weight: 600; }
.v2-chip b { color: var(--ink); font-weight: 600; }
.v2-chip .up { color: var(--green); }
.v2-chip .dn { color: var(--red); }
.v2-chip.chip-1 { right: 2%;  top: 14%;   left: auto; animation-delay: 0s; }
.v2-chip.chip-2 { right: 10%; bottom: 32%; left: auto; animation-delay: -1.5s; }
.v2-chip.chip-3 { right: 4%;  bottom: 10%; animation-delay: -3s; }
@keyframes chipFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .v3 { animation: v3Float 10s ease-in-out infinite; transform-style: preserve-3d; }
@keyframes v3Float {
0%,100% { transform: rotateX(8deg) rotateY(-8deg); }
50%     { transform: rotateX(8deg) rotateY(-10deg) translateY(-10px); }
}
.v3-desk { position: absolute; inset: 0; transform-style: preserve-3d; }
.v3-monitor {
position: absolute;
background: linear-gradient(180deg, #0E2553, #050B1B);
border-radius: 14px;
box-shadow: 0 30px 60px -20px rgba(0,0,0,.6), inset 0 0 0 1px rgba(77,163,255,.25);
overflow: hidden;
}
.v3-main { left: 10%; right: 28%; top: 12%; height: 50%; transform: translateZ(40px); }
.v3-side1 { right: 4%; top: 8%; width: 30%; height: 42%; transform: translateZ(60px) rotateY(-14deg); transform-origin: left center; }
.v3-side2 { right: 8%; bottom: 14%; width: 38%; height: 32%; transform: translateZ(80px) rotateY(-8deg); transform-origin: left center; }
.v3-mhead { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid rgba(77,163,255,.14); font-family: var(--font-mono); font-size: 10.5px; color: #8FB8E8; }
.v3-mhead.small { padding: 8px 12px; font-size: 10px; }
.v3-mhead .lights { display: flex; gap: 4px; }
.v3-mhead .lights span { width: 7px; height: 7px; border-radius: 50%; background: #FF5F56; }
.v3-mhead .lights span:nth-child(2) { background: #FFBD2E; }
.v3-mhead .lights span:nth-child(3) { background: #27C93F; }
.v3-mhead .live { margin-left: auto; color: #27C93F; font-weight: 600; }
.v3-chart { position: absolute; inset: 34px 10px 10px; }
.v3-chart svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.v3-candles { position: absolute; inset: 10% 6% 6%; display: flex; gap: 6px; align-items: end; }
.v3-candles i { flex: 1; height: var(--h); border-radius: 2px 2px 0 0; box-shadow: 0 0 10px currentColor; }
.v3-candles i.up { background: linear-gradient(180deg, #34D399, #0F9D58); color: rgba(52,211,153,.4); }
.v3-candles i.dn { background: linear-gradient(180deg, #FF7A7A, #E14646); color: rgba(225,70,70,.4); }
.v3-book { padding: 8px 12px; font-family: var(--font-mono); font-size: 10.5px; display: flex; flex-direction: column; gap: 4px; }
.v3-book .row { display: flex; justify-content: space-between; padding: 3px 0; border-bottom: 1px dashed rgba(77,163,255,.1); color: #8FB8E8; }
.v3-book .row b { font-weight: 500; }
.v3-book .row .up { color: #34D399; }
.v3-book .row .dn { color: #FF6B6B; }
.v3-book .row.mid { background: rgba(255,210,74,.08); border-radius: 6px; padding: 4px 6px; margin: 2px 0; color: var(--accent); }
.v3-pnl { padding: 12px 14px; }
.v3-pnl .k { font-family: var(--font-mono); font-size: 10px; color: #8FB8E8; letter-spacing: .12em; text-transform: uppercase; }
.v3-pnl .v { font-family: var(--font-display); font-size: 32px; color: #fff; margin: 6px 0 10px; line-height: 1; }
.v3-pnl .v em { font-style: italic; color: var(--accent); }
.v3-pnl .bars { display: flex; gap: 4px; height: 30px; align-items: end; }
.v3-pnl .bars i { flex: 1; height: var(--h); background: linear-gradient(180deg, var(--blue), var(--blue-2)); border-radius: 2px; box-shadow: 0 0 8px var(--blue-glow); }
.v3-keyboard {
position: absolute; left: 10%; right: 10%; bottom: 4%;
height: 30px;
background: linear-gradient(180deg, #13223F, #050B1B);
border-radius: 6px;
box-shadow: inset 0 0 0 1px rgba(77,163,255,.14);
transform: rotateX(40deg);
transform-origin: center bottom;
} .v4 { animation: v4Float 8s ease-in-out infinite; transform-style: preserve-3d; }
@keyframes v4Float { 0%,100% { transform: rotateX(8deg) rotateY(-20deg); } 50% { transform: rotateX(8deg) rotateY(-20deg) translateY(-14px); } }
.v4-monitor {
position: absolute; left: 8%; right: 8%; top: 14%; bottom: 18%;
background: linear-gradient(180deg, #0E2553, #050B1B);
border-radius: 22px;
box-shadow: 0 40px 80px -20px rgba(0,0,0,.6), inset 0 0 0 1px rgba(77,163,255,.18);
overflow: hidden;
}
.v4-monitor .chart {
position: absolute; inset: 20px;
display: grid; grid-template-columns: repeat(24, 1fr); gap: 3px; align-items: end;
}
.v4-monitor .chart i {
background: linear-gradient(180deg, var(--blue), var(--blue-2));
border-radius: 2px;
height: var(--h, 40%);
animation: bar 6s ease-in-out infinite;
animation-delay: var(--d,0s);
}
.v4-monitor .chart i.dn { background: linear-gradient(180deg, #FF7A7A, #E14646); }
.v4-monitor .chart i.gd { background: linear-gradient(180deg, var(--accent), var(--accent-2)); }
.v4-card {
position: absolute;
background: var(--surface);
border-radius: 14px;
padding: 14px 16px;
box-shadow: 0 20px 50px -12px rgba(0,0,0,.55), inset 0 0 0 1px var(--line-2);
transform-style: preserve-3d;
animation: floatCard 6s ease-in-out infinite;
}
@keyframes floatCard { 0%,100% { transform: translate3d(0,0,80px); } 50% { transform: translate3d(0,-8px,100px); } }
.v4-card-1 { left: -4%; top: 10%; width: 180px; animation-delay: 0s; }
.v4-card-2 { right: -2%; bottom: 10%; width: 200px; animation-delay: -2s; }
.v4-card-3 { right: 12%; top: 0%; width: 150px; animation-delay: -3.5s; }
.v4-card .mini-label { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-3); }
.v4-card .mini-value { font-family: var(--font-display); font-size: 32px; color: var(--ink); line-height: 1; margin: 8px 0 4px; }
.v4-card .mini-value em { font-style: italic; color: var(--blue); }
.v4-card .mini-value em.g { color: var(--accent); }
.v4-card .mini-sub { font-size: 11.5px; color: var(--green); font-weight: 600; }
.v4-card code { font-family: var(--font-mono); font-size: 10.5px; display: block; color: var(--blue); background: var(--surface-2); padding: 6px 8px; border-radius: 6px; margin-top: 6px; line-height: 1.4; } .hero-picker {
position: absolute; right: 28px; top: 20px;
z-index: 5;
display: flex; gap: 6px;
background: var(--surface);
padding: 6px;
border-radius: 999px;
box-shadow: 0 10px 30px -10px rgba(0,0,0,.35), inset 0 0 0 1px var(--line-2);
}
.hero-picker button {
width: 30px; height: 30px; border-radius: 50%;
font-family: var(--font-mono); font-size: 11px; color: var(--ink-2);
font-weight: 600;
}
.hero-picker button.active { background: var(--accent); color: #0B1220; }
@media (max-width: 720px) { .hero-picker { display: none; } } section.sec { padding: 60px 0; position: relative; z-index: 1; }
.section-head { max-width: 780px; margin-bottom: 56px; }
.section-head .lead { margin-top: 18px; } .page-hero { padding-top: 20px !important; padding-bottom: 20px !important; }
.blog-hero-lottie {
aspect-ratio: 2/3 !important;
max-width: 340px !important;
margin-left: 8px !important;
margin-top: -20px !important; overflow: visible !important;
}
.blog-hero-lottie svg {
overflow: visible !important;
}
.page-hero .breadcrumb { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); margin-bottom: 18px; letter-spacing: .06em; }
.page-hero .breadcrumb .sep { color: var(--line-2); margin: 0 6px; }
.page-hero h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(36px, 4.5vw, 64px); line-height: 1.02; letter-spacing: -0.025em; color: var(--ink); margin: 12px 0 18px; }
.page-hero h1 em { font-style: italic; color: var(--accent); } .faq-hero-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: center; }
.faq-hero-grid h1 { font-size: clamp(36px, 4.5vw, 64px); }
.faq-hero-lottie { width: 100%; max-width: 420px; aspect-ratio: 3/2; margin: 0; }
.faq-hero-lottie svg { display: block; }
@media (max-width: 900px) { .faq-hero-grid { grid-template-columns: 1fr; } .faq-hero-lottie { display: none; } } .blog-hero-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: center; }
.blog-hero-grid h1 { font-size: clamp(36px, 4.5vw, 64px); }
.blog-hero-lottie { width: 100%; max-width: 330px; aspect-ratio: 2/3; margin: 0; }
.blog-hero-lottie svg { display: block; }
@media (max-width: 900px) { .blog-hero-grid { grid-template-columns: 1fr; } .blog-hero-lottie { display: none; } } .contact-hero-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: start; }
.contact-hero-grid h1 { font-size: clamp(36px, 4.5vw, 64px); }
.contact-hero-lottie { width: 100%; max-width: 420px; aspect-ratio: 1/1; margin: -40px 0 -60px; }
.contact-hero-lottie svg { display: block; }
@media (max-width: 900px) { .contact-hero-grid { grid-template-columns: 1fr; } .contact-hero-lottie { display: none; } } .about-hero-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; }
.about-hero-grid h1 { font-size: clamp(36px, 4.5vw, 64px); }
.about-hero-visual { position: relative; width: 100%; aspect-ratio: 1/1; max-width: 380px; margin: 0 auto; }
.about-hero-visual .about-v1-scene { position: absolute; inset: 0; transform-style: preserve-3d; perspective: 1200px; }
.about-hero-visual .hv-glow { position: absolute; inset: 0; }
@media (max-width: 900px) { .about-hero-grid { grid-template-columns: 1fr; } .about-hero-visual { max-width: 360px; } } .services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 900px) { .services-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .services-grid { grid-template-columns: 1fr; } }
.svc-card {
position: relative;
padding: 28px;
border-radius: 22px;
background: var(--surface);
box-shadow: inset 0 0 0 1px var(--line), 0 10px 30px -20px rgba(0,0,0,.4);
transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease;
transform-style: preserve-3d;
}
.svc-card:hover {
transform: translateY(-6px) rotateX(3deg) rotateY(-3deg);
box-shadow: 0 30px 60px -20px rgba(0,0,0,.5), inset 0 0 0 1px var(--accent);
}
.svc-icon {
width: 52px; height: 52px; border-radius: 14px;
display: grid; place-items: center;
font-family: var(--font-display); font-size: 22px; font-style: italic; color: var(--accent);
background: var(--surface-2);
box-shadow: inset 0 0 0 1px var(--line-2);
margin-bottom: 18px;
transform: translateZ(20px);
}
.svc-card h3 { font-family: var(--font-display); font-size: 26px; font-weight: 400; color: var(--ink); margin-bottom: 8px; transform: translateZ(16px); }
.svc-card p { font-size: 14.5px; color: var(--ink-2); line-height: 1.6; } .services-list { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--line); }
.service-row {
display: grid; grid-template-columns: 60px 50px 1.2fr 2fr 60px; gap: 24px; align-items: center;
padding: 36px 8px;
border-bottom: 1px solid var(--line);
transition: background .2s ease, padding .2s ease;
}
.service-row:hover { background: var(--surface); padding-left: 20px; }
.service-row .s-num { font-family: var(--font-mono); font-size: 13px; color: var(--ink); letter-spacing: .1em; font-weight: 500; }
.service-row .s-icon { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; color: var(--ink-3); opacity: 0; transform: translateX(-12px); transition: opacity .3s ease, transform .3s ease, color .3s ease; }
.service-row:hover .s-icon { opacity: 1; transform: translateX(0); color: var(--accent); animation: iconGlitter 0.9s ease-out 0.3s; }
@keyframes iconGlitter {
0%   { filter: drop-shadow(0 0 0 transparent) brightness(1); }
40%  { filter: drop-shadow(0 0 12px var(--accent)) brightness(1.8); }
70%  { filter: drop-shadow(0 0 6px var(--accent)) brightness(1.3); }
100% { filter: drop-shadow(0 0 0 transparent) brightness(1); }
}
.service-row h3 { font-family: var(--font-display); font-weight: 400; font-size: 32px; line-height: 1.1; color: var(--ink); }
.service-row p { font-size: 14.5px; color: var(--ink-2); }
.service-row .s-arrow { font-size: 24px; color: var(--accent); text-align: center; padding-right: 16px; transition: transform .25s ease; }
.service-row:hover .s-arrow { transform: translateX(8px); animation: arrowGlitter 0.9s ease-out 0.3s; }
@keyframes arrowGlitter {
0%   { filter: drop-shadow(0 0 0 transparent) brightness(1); }
40%  { filter: drop-shadow(0 0 12px var(--accent)) brightness(1.8); }
70%  { filter: drop-shadow(0 0 6px var(--accent)) brightness(1.3); }
100% { filter: drop-shadow(0 0 0 transparent) brightness(1); }
} body[data-theme="light"] .service-row:hover .s-icon { animation: iconGlitterLight 0.9s ease-out 0.3s; }
body[data-theme="light"] .service-row:hover .s-arrow { animation: arrowGlitterLight 0.9s ease-out 0.3s; }
@keyframes iconGlitterLight {
0%   { filter: drop-shadow(0 0 0 transparent) brightness(1); }
40%  { filter: drop-shadow(0 0 14px #B8860B) drop-shadow(0 0 6px #C9962A) brightness(1.15) saturate(1.4); }
70%  { filter: drop-shadow(0 0 8px #B8860B) brightness(1.08) saturate(1.2); }
100% { filter: drop-shadow(0 0 0 transparent) brightness(1); }
}
@keyframes arrowGlitterLight {
0%   { filter: drop-shadow(0 0 0 transparent) brightness(1); }
40%  { filter: drop-shadow(0 0 14px #B8860B) drop-shadow(0 0 6px #C9962A) brightness(1.15) saturate(1.4); }
70%  { filter: drop-shadow(0 0 8px #B8860B) brightness(1.08) saturate(1.2); }
100% { filter: drop-shadow(0 0 0 transparent) brightness(1); }
}
@media (max-width: 900px) {
.service-row { grid-template-columns: 1fr; gap: 10px; padding: 28px 0; }
.service-row .s-arrow { display: none; }
.service-row .s-icon {
display: flex !important;
opacity: 1 !important;
transform: none !important;
color: var(--accent) !important;
margin-bottom: 6px;
}
} .stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 40px 0 60px; }
@media (max-width: 820px) { .stats-row { grid-template-columns: 1fr 1fr; } }
.stat-block { padding: 28px; border-radius: 20px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.stat-block .n { font-family: var(--font-display); font-size: 58px; line-height: 1; color: var(--ink); }
.stat-block .n em { font-style: italic; color: var(--accent); }
.stat-block .l { margin-top: 10px; font-size: 13px; color: var(--ink-3); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .06em; } .why-grid-wrap { position: relative; }
.why-grid-bg-lottie {
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%);
width: 360px; height: 360px;
pointer-events: none;
z-index: 5;
opacity: 0;
animation: diagRobotIn 0.8s ease-out 0.1s forwards;
}
.why-grid-bg-lottie svg { display: block; width: 100%; height: 100%; }
@keyframes diagRobotIn {
from { opacity: 0; transform: translate(-50%, -40%) scale(0.85); }
to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 90px; position: relative; z-index: 1; }
.why-grid .why-item { opacity: 0; }
.why-grid .why-item:nth-child(1) { animation: diagBoxFromTopLeft     0.9s ease-out 1.1s forwards; }
.why-grid .why-item:nth-child(2) { animation: diagBoxFromTopRight    0.9s ease-out 1.9s forwards; }
.why-grid .why-item:nth-child(3) { animation: diagBoxFromBottomLeft  0.9s ease-out 2.7s forwards; }
.why-grid .why-item:nth-child(4) { animation: diagBoxFromBottomRight 0.9s ease-out 3.5s forwards; }
@keyframes diagBoxFromTopLeft {
from { opacity: 0; transform: translate(-80px, -60px) rotate(-360deg) scale(0.6); }
to   { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); }
}
@keyframes diagBoxFromTopRight {
from { opacity: 0; transform: translate(80px, -60px) rotate(360deg) scale(0.6); }
to   { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); }
}
@keyframes diagBoxFromBottomLeft {
from { opacity: 0; transform: translate(-80px, 60px) rotate(-360deg) scale(0.6); }
to   { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); }
}
@keyframes diagBoxFromBottomRight {
from { opacity: 0; transform: translate(80px, 60px) rotate(360deg) scale(0.6); }
to   { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); }
}
@media (max-width: 720px) { .why-grid { grid-template-columns: 1fr; gap: 16px; } .why-grid-bg-lottie { display: none; } }
.why-item { padding: 30px; border-radius: 20px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.why-item .num { font-family: var(--font-mono); font-size: 11px; color: var(--accent); letter-spacing: .14em; }
.why-item h4 { font-family: var(--font-display); font-weight: 400; font-size: 28px; color: var(--ink); margin: 14px 0 10px; }
.why-item p { font-size: 14.5px; color: var(--ink-2); line-height: 1.7; }
.checklist { display: flex; flex-wrap: wrap; gap: 16px 28px; margin-top: 48px; list-style: none; font-family: var(--font-mono); font-size: 12px; color: var(--ink); text-transform: uppercase; letter-spacing: .1em; }
.checklist li::before { content: '◆ '; color: var(--accent); margin-right: 6px; } .store-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 900px) { .store-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .store-grid { grid-template-columns: 1fr; } }
.product-card { background: var(--surface); border-radius: 22px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); transition: transform .3s ease; }
.product-card:hover { transform: translateY(-6px); }
.product-thumb {
aspect-ratio: 16/10;
background:
radial-gradient(circle at 30% 30%, rgba(77,163,255,.25), transparent 60%),
linear-gradient(135deg, var(--surface-2), var(--bg-2));
display: grid; place-items: center;
font-family: var(--font-display); font-size: 38px; font-style: italic; color: var(--ink);
position: relative;
}
.product-thumb .tag { position: absolute; top: 14px; left: 14px; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; padding: 5px 10px; border-radius: 999px; }
.product-thumb .tag.live { background: rgba(52,211,153,.15); color: var(--green); }
.product-thumb .tag.soon { background: rgba(255,210,74,.15); color: var(--accent); }
.product-thumb .tag.dev { background: rgba(77,163,255,.15); color: var(--blue); }
.product-body { padding: 22px; }
.product-body .cat { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); letter-spacing: .1em; text-transform: uppercase; }
.product-body h3 { font-family: var(--font-display); font-size: 28px; font-weight: 400; margin: 6px 0 10px; }
.product-body p { font-size: 14px; color: var(--ink-2); line-height: 1.6; margin-bottom: 16px; }
.product-features { list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; color: var(--ink-2); margin-bottom: 18px; }
.product-features li::before { content: '◦ '; color: var(--accent); }
.product-footer { display: flex; justify-content: space-between; align-items: center; }
.product-price { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); } .diag-banner {
position: relative; overflow: hidden;
background:
radial-gradient(600px 300px at 80% 20%, rgba(255,210,74,.15), transparent 70%),
rgba(255, 255, 255, 0.04);
backdrop-filter: blur(16px) saturate(140%);
-webkit-backdrop-filter: blur(16px) saturate(140%);
color: var(--ink);
border-radius: 28px;
padding: 60px;
display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center;
box-shadow:
0 40px 80px -30px rgba(0,0,0,.5),
inset 0 0 0 1px rgba(255, 255, 255, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.15);
} body[data-theme="light"] .diag-banner {
background:
radial-gradient(600px 300px at 80% 20%, rgba(212, 165, 60, .12), transparent 70%),
rgba(255, 255, 255, 0.25);
box-shadow:
0 30px 60px -25px rgba(11, 30, 63, .15),
inset 0 0 0 1px rgba(11, 30, 63, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.diag-banner h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(32px, 3.6vw, 48px); line-height: 1.1; color: var(--ink); }
.diag-banner h2 em { font-style: italic; color: var(--accent); }
.diag-banner p { color: var(--ink-2); margin: 18px 0 28px; max-width: 520px; }
.diag-visual { position: relative; aspect-ratio: 1/1; max-width: 320px; margin-left: 0; perspective: 900px; }
.diag-lottie { width: 100%; height: 100%; transform: scaleX(-1); }
.diag-orb {
position: absolute; inset: 0; border-radius: 50%;
background: radial-gradient(circle at 30% 30%, var(--accent), var(--accent-2) 55%, #8b6300 100%);
box-shadow: 0 0 80px var(--accent-glow), inset 10px 10px 40px rgba(255,255,255,.2);
animation: orbRot 12s linear infinite;
}
.diag-orb::after { content: ''; position: absolute; inset: 18%; border-radius: 50%; border: 1px dashed rgba(11,30,63,.5); animation: orbRot 8s linear infinite reverse; }
@keyframes orbRot { to { transform: rotateY(360deg); } }
@media (max-width: 760px) { .diag-banner { grid-template-columns: 1fr; padding: 36px; } .diag-visual { display: none; } } .cta-band { padding: 100px 0 140px; text-align: center; }
.cta-band .display { max-width: 900px; margin: 22px auto 26px; }
.cta-band .lead { margin: 0 auto 32px; text-align: center; }
.cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .contact-wrap {
display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
padding: 44px;
background: var(--surface);
border-radius: 28px;
box-shadow: inset 0 0 0 1px var(--line-2), 0 30px 60px -30px rgba(0,0,0,.4);
}
@media (max-width: 900px) { .contact-wrap { grid-template-columns: 1fr; padding: 28px; } }
.contact-info h3 { font-family: var(--font-display); font-weight: 400; font-size: 36px; color: var(--ink); margin-bottom: 14px; }
.contact-info h3 em { font-style: italic; color: var(--accent); }
.contact-info p { color: var(--ink-2); margin-bottom: 24px; }
.contact-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.contact-list li { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); font-size: 14px; color: var(--ink-2); }
.contact-list li strong { color: var(--ink); }
form.contact-form { display: grid; gap: 14px; }
form.contact-form label { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); display: block; margin-bottom: 6px; }
form.contact-form input, form.contact-form textarea, form.contact-form select {
width: 100%; padding: 12px 14px;
border-radius: 12px; border: 1px solid var(--line-2);
background: var(--surface-2); color: var(--ink);
transition: border-color .2s, box-shadow .2s;
}
form.contact-form input:focus, form.contact-form textarea:focus, form.contact-form select:focus {
outline: none; border-color: var(--accent);
box-shadow: 0 0 0 4px var(--accent-glow);
}
form.contact-form textarea { min-height: 130px; resize: vertical; } .file-upload-wrap { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.file-upload-btn {
display: inline-flex; align-items: center; gap: 8px;
padding: 10px 16px;
background: var(--surface); color: var(--ink);
border: 1px dashed var(--line-2); border-radius: 10px;
cursor: pointer; font-size: 13px; font-weight: 500;
transition: all .2s ease;
font-family: inherit;
}
.file-upload-btn:hover { border-color: var(--accent); color: var(--accent); }
.file-upload-btn svg { flex-shrink: 0; }
.file-upload-hint { font-size: 12px; color: var(--ink-3); font-family: var(--font-mono); }
.file-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.file-item {
display: flex; align-items: center; gap: 10px;
padding: 8px 12px;
background: var(--surface); border: 1px solid var(--line);
border-radius: 8px;
font-size: 13px;
}
.file-name { flex: 1; color: var(--ink); word-break: break-all; }
.file-size { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); flex-shrink: 0; }
.file-remove {
background: transparent; border: none; cursor: pointer;
color: var(--ink-3); font-size: 22px; line-height: 1;
padding: 0 4px; transition: color .2s;
}
.file-remove:hover { color: #ff6b6b; }
.frow-err { display: block; margin-top: 6px; font-size: 12px; color: #ff6b6b; min-height: 16px; }
.captcha-wrap { display: flex; align-items: center; gap: 12px; flex-wrap: nowrap; }
.captcha-img {
background: var(--surface); border: 1px solid var(--line);
border-radius: 8px; padding: 4px 8px;
height: 44px; width: 150px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center; user-select: none;
}
.captcha-img svg { width: 100%; height: 100%; display: block; }
.captcha-refresh {
background: var(--surface); border: 1px solid var(--line);
border-radius: 8px; width: 44px; height: 44px; flex-shrink: 0;
cursor: pointer; color: var(--ink-2); font-size: 18px;
display: flex; align-items: center; justify-content: center;
transition: all .25s; padding: 0; font-family: inherit;
}
.captcha-refresh:hover { border-color: var(--accent); color: var(--accent); transform: rotate(180deg); }
.captcha-input {
width: 150px !important; height: 44px;
padding: 0 12px !important;
flex-shrink: 0;
font-family: var(--font-mono) !important;
font-size: 14px !important;
letter-spacing: 3px;
} .faq-list { display: flex; flex-direction: column; gap: 10px; }
.faq-item { padding: 22px 24px; background: var(--surface); border-radius: 16px; box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; transition: background .2s; }
.faq-item:hover { background: var(--surface-2); }
.faq-q { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-display); font-size: 22px; color: var(--ink); }
.faq-q .ic { font-size: 18px; color: var(--accent); transition: transform .25s; }
.faq-item[open] .faq-q .ic { transform: rotate(45deg); }
.faq-a { margin-top: 14px; color: var(--ink-2); font-size: 15px; line-height: 1.7; display: none; }
.faq-item[open] .faq-a { display: block; } .pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 900px) { .pricing-grid { grid-template-columns: 1fr; } } .pricing-zone { position: relative; }
.pricing-floating-robot {
position: absolute;
width: 280px; height: 280px;
top: 0; left: 0;
z-index: 5;
pointer-events: none;
object-fit: contain;
animation: pricingRobotPath 42s linear infinite;
transition: opacity 0.3s ease;
} .pricing-zone:has(.price-card:hover) .pricing-floating-robot { opacity: 0; }
@keyframes pricingRobotPath {
0%   { top: 80px;  left: calc(100% - 320px); }
25%  { top: 80px;  left: 40px; }
50%  { top: calc(100% - 100px); left: 40px; }
75%  { top: calc(100% - 100px); left: calc(100% - 320px); }
100% { top: 80px;  left: calc(100% - 320px); }
}
@media (max-width: 900px) { .pricing-floating-robot { display: none; } } .price-card { position: relative; overflow: visible; }
.price-card-peek {
position: absolute;
width: 180px; height: 180px;
top: -80px; left: 80%;
transform: translate(-50%, 80px);
z-index: 6;
opacity: 0;
pointer-events: none;
object-fit: contain;
transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.price-card:hover .price-card-peek {
opacity: 1;
transform: translate(-50%, -25%); }
@media (max-width: 900px) { .price-card-peek { display: none; } } .pricing-promise-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
max-width: 1100px;
margin: 40px auto 0;
}
.promise-card {
position: relative; overflow: hidden;
padding: 28px 24px;
border-radius: 16px;
background:
radial-gradient(300px 150px at 80% 0%, rgba(255, 210, 74, 0.10), transparent 70%),
rgba(255, 255, 255, 0.04);
backdrop-filter: blur(16px) saturate(140%);
-webkit-backdrop-filter: blur(16px) saturate(140%);
box-shadow:
0 18px 36px -20px rgba(0, 0, 0, .45),
inset 0 0 0 1px rgba(255, 210, 74, 0.45),
inset 0 1px 0 rgba(255, 255, 255, 0.10);
transition: all 0.3s ease;
}
.promise-card:hover {
transform: translateY(-4px);
box-shadow:
0 28px 48px -20px rgba(0, 0, 0, .55),
inset 0 0 0 1px rgba(255, 210, 74, 0.65),
inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.promise-icon {
width: 48px; height: 48px;
border-radius: 12px;
background: rgba(255, 210, 74, 0.10);
color: var(--accent);
display: flex; align-items: center; justify-content: center;
margin-bottom: 18px;
}
.promise-card h4 {
font-family: var(--font-display);
font-size: 19px;
font-weight: 500;
color: var(--ink);
margin: 0 0 10px;
line-height: 1.2;
}
.promise-card p {
margin: 0;
color: var(--ink);
opacity: 0.78;
font-size: 13.5px;
line-height: 1.65;
}
body[data-theme="light"] .promise-card {
background:
radial-gradient(300px 150px at 80% 0%, rgba(212, 165, 60, 0.10), transparent 70%),
rgba(255, 255, 255, 0.25);
box-shadow:
0 18px 36px -20px rgba(11, 30, 63, .15),
inset 0 0 0 1px rgba(212, 165, 60, 0.45),
inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
body[data-theme="light"] .promise-icon {
background: rgba(212, 165, 60, 0.12);
}
@media (max-width: 1024px) {
.pricing-promise-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.pricing-promise-grid { grid-template-columns: 1fr; gap: 14px; margin: 32px 16px 0; }
}
.price-card { padding: 36px 30px; border-radius: 24px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.price-card.featured { background: linear-gradient(180deg, var(--surface), var(--surface-2)); box-shadow: inset 0 0 0 1px var(--accent), 0 30px 60px -20px var(--accent-glow); transform: translateY(-8px); }
.price-card .name { font-family: var(--font-mono); font-size: 12px; color: var(--accent); letter-spacing: .14em; text-transform: uppercase; }
.price-card .amt { font-family: var(--font-display); font-size: 58px; color: var(--ink); line-height: 1; margin: 14px 0 4px; }
.price-card .amt em { font-style: italic; color: var(--accent); }
.price-card .sub { font-size: 13px; color: var(--ink-3); margin-bottom: 22px; }
.price-card ul { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-bottom: 26px; }
.price-card ul li { font-size: 14px; color: var(--ink-2); }
.price-card ul li::before { content: '✓ '; color: var(--accent); font-weight: 700; }
.price-card .btn { width: 100%; justify-content: center; } .blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .blog-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .blog-grid { grid-template-columns: 1fr; } }
.blog-card { background: var(--surface); border-radius: 20px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); transition: transform .3s ease; }
.blog-card:hover { transform: translateY(-6px); }
.blog-thumb { aspect-ratio: 16/10; background: linear-gradient(135deg, var(--bg-2), var(--surface-2)); display: grid; place-items: center; font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); letter-spacing: .1em; }
.blog-body { padding: 22px; }
.blog-body .meta { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); letter-spacing: .1em; text-transform: uppercase; }
.blog-body h3 { font-family: var(--font-display); font-size: 24px; font-weight: 400; margin: 10px 0; }
.blog-body p { font-size: 14px; color: var(--ink-2); line-height: 1.6; } .about-split { display: grid; grid-template-columns: 1fr 1.2fr; gap: 60px; align-items: center; }
@media (max-width: 900px) { .about-split { grid-template-columns: 1fr; } }
.about-image {
aspect-ratio: 4/5; border-radius: 24px;
background:
radial-gradient(circle at 30% 20%, rgba(77,163,255,.35), transparent 60%),
linear-gradient(135deg, var(--surface-2), var(--bg-2));
position: relative; overflow: hidden;
box-shadow: inset 0 0 0 1px var(--line-2);
}
.about-svg {
position: absolute;
top: 8%; left: 50%;
width: 88%; height: auto;
transform: translateX(-50%);
animation: aboutFloat 4s ease-in-out infinite;
}
@keyframes aboutFloat {
0%, 100% { transform: translateX(-50%) translateY(0); }
50%      { transform: translateX(-50%) translateY(-12px); }
}
.about-image-overlay { position: absolute; inset: auto 24px 24px 24px; padding: 20px; background: var(--surface); border-radius: 16px; box-shadow: 0 20px 40px -20px rgba(0,0,0,.5), inset 0 0 0 1px var(--line-2); }
.about-image-overlay .q { font-family: var(--font-display); font-style: italic; font-size: 20px; color: var(--ink); margin-bottom: 10px; line-height: 1.4; }
.about-text p { color: var(--ink-2); margin-bottom: 16px; font-size: 15.5px; line-height: 1.8; } .footer { background: var(--bg-2); color: var(--ink-2); padding: 72px 0 28px; border-top: 1px solid var(--line); position: relative; z-index: 2; }
.footer-top { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 36px; padding-bottom: 48px; border-bottom: 1px solid var(--line); }
.footer-brand p { color: var(--ink-3); font-size: 14px; line-height: 1.6; margin: 16px 0 20px; max-width: 320px; }
.footer-logo { display: inline-block; }
.footer-logo img { height: 52px; width: auto; display: block; }
.flogo img { height: 40px; }
.socials { display: flex; gap: 10px; }
.socials a { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); font-size: 14px; transition: background .2s, color .2s; color: var(--ink-2); }
.socials a:hover { background: var(--accent); color: #0B1220; }
.footer-col h4 { color: var(--ink); font-family: var(--font-sans); font-size: 13px; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 18px; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-col a { font-size: 14px; transition: color .2s; }
.footer-col a:hover { color: var(--accent); }
.footer-disclaimer { padding: 24px 0; border-bottom: 1px solid var(--line); font-size: 11.5px; color: var(--ink-3); line-height: 1.7; }
.footer-disclaimer h5 { color: var(--ink-2); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 8px; }
.footer-bottom { display: flex; justify-content: space-between; padding-top: 24px; font-size: 12.5px; color: var(--ink-3); flex-wrap: wrap; gap: 16px; }
.footer-bottom ul { list-style: none; display: flex; gap: 22px; } .tweaks {
position: fixed; right: 20px; bottom: 20px; z-index: 200;
background: var(--surface); color: var(--ink);
padding: 18px; border-radius: 18px;
box-shadow: 0 30px 60px -12px rgba(0,0,0,.5), inset 0 0 0 1px var(--line-2);
width: 300px; font-size: 13px;
display: none;
max-height: 85vh; overflow-y: auto;
}
.tweaks.show { display: block; animation: fadeUp .3s ease both; }
.tweaks h5 { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-3); margin-bottom: 10px; }
.tweaks .row { margin-bottom: 16px; }
.tweaks .row:last-child { margin-bottom: 0; }
.tweaks .opts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.tweaks .opts.three { grid-template-columns: repeat(3, 1fr); }
.tweaks .opts.four { grid-template-columns: repeat(4, 1fr); }
.tweaks .opt {
padding: 9px 10px; border-radius: 10px;
font-size: 12px; font-weight: 500;
background: var(--surface-2); color: var(--ink);
border: 1px solid transparent;
text-align: center;
}
.tweaks .opt.active { background: var(--accent); color: #0B1220; border-color: var(--accent); }
.tweaks .swatches { display: flex; gap: 8px; }
.tweaks .sw {
width: 32px; height: 32px; border-radius: 10px;
border: 2px solid transparent;
cursor: pointer;
}
.tweaks .sw.active { border-color: var(--ink); } .observe { opacity: 0; transform: translateY(14px); transition: opacity .65s ease, transform .65s cubic-bezier(.2,.7,.2,1); animation: observeFallback 0s 1.5s forwards; }
.observe.in { opacity: 1; transform: none; animation: none; }
@keyframes observeFallback { to { opacity: 1; transform: none; } } body[data-font="serif"]    { --font-sans: 'Fraunces', Georgia, serif; --font-display: 'Fraunces', Georgia, serif; }
body[data-font="modern"]   { --font-sans: 'Space Grotesk', system-ui, sans-serif; --font-display: 'DM Serif Display', serif; }
body[data-font="technical"]{ --font-sans: 'Inter', system-ui, sans-serif; --font-display: 'Syne', sans-serif; }
body[data-font="editorial"]{ --font-sans: 'Inter', system-ui, sans-serif; --font-display: 'DM Serif Display', serif; } .tg-float {
position: fixed;
bottom: 28px;
right: 28px;
z-index: 9999;
display: flex;
align-items: center;
gap: 8px;
width: 56px;
height: 56px;
padding: 0;
border-radius: 50%;
background: linear-gradient(135deg, #2AABEE, #229ED9);
color: #fff;
box-shadow: 0 10px 30px -8px rgba(34, 158, 217, 0.5), 0 6px 16px -6px rgba(0,0,0,0.25);
text-decoration: none;
overflow: hidden;
transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
cursor: pointer;
}
.tg-float svg {
width: 28px;
height: 28px;
flex-shrink: 0;
margin-left: 14px;
filter: drop-shadow(0 1px 2px rgba(0,0,0,0.15));
}
.tg-float-text {
font-family: var(--font-mono);
font-size: 13px;
font-weight: 600;
white-space: nowrap;
opacity: 0;
transform: translateX(-6px);
transition: opacity 0.25s ease, transform 0.25s ease;
padding-right: 18px;
letter-spacing: 0.02em;
}
.tg-float:hover {
width: auto;
padding-right: 4px;
border-radius: 28px;
box-shadow: 0 14px 36px -8px rgba(34, 158, 217, 0.65), 0 8px 20px -6px rgba(0,0,0,0.35);
transform: translateY(-2px);
}
.tg-float:hover .tg-float-text {
opacity: 1;
transform: translateX(0);
} @media (max-width: 600px) {
.tg-float { bottom: 20px; right: 20px; width: 52px; height: 52px; }
.tg-float svg { width: 26px; height: 26px; margin-left: 13px; }
}  .mobile-cta { display: none; } @media (max-width: 980px) {
.mobile-toggle {
display: inline-flex !important;
align-items: center;
justify-content: center;
width: 42px; height: 42px;
background: transparent;
border: 1px solid var(--line-2);
border-radius: 10px;
color: var(--ink);
font-size: 20px;
cursor: pointer;
transition: all .2s ease;
padding: 0;
z-index: 120;
font-family: inherit;
position: relative;
}
.mobile-toggle:hover { border-color: var(--accent); color: var(--accent); } .nav-logo { flex-shrink: 0; }
.nav-logo-text { font-size: 20px; white-space: nowrap; } .nav-cta .btn-secondary { display: none; } .nav-cta .theme-toggle { display: inline-flex; } .nav-links {
display: flex !important;
position: fixed;
top: 0; right: 0;
width: 75%; max-width: 320px;
height: 100vh;
flex-direction: column;
gap: 4px;
padding: 80px 24px 32px;
background: var(--bg-2, #0E1A35);
box-shadow: -20px 0 60px rgba(0,0,0,0.5);
transform: translateX(100%);
visibility: hidden;
transition: transform .35s cubic-bezier(0.4, 0, 0.2, 1), visibility .35s;
z-index: 101;
overflow-y: auto;
}
.nav-links.mobile-open { transform: translateX(0); visibility: visible; }
.nav-links li { width: 100%; }
.nav-links a {
display: block;
width: 100%;
padding: 14px 16px !important;
font-size: 16px;
border-radius: 10px;
}
.nav-links a.nav-home {
width: auto;
padding: 12px 16px !important;
} .nav-links .mobile-cta { display: block; margin-top: 18px; }
.nav-links .mobile-cta a {
display: flex !important;
align-items: center;
justify-content: center;
padding: 14px 18px !important;
background: var(--accent) !important;
color: #0B1220 !important;
font-weight: 600;
border-radius: 10px;
} .mobile-nav-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.55);
backdrop-filter: blur(4px);
opacity: 0;
visibility: hidden;
transition: opacity .3s ease, visibility .3s ease;
z-index: 100;
}
.mobile-nav-backdrop.active {
opacity: 1;
visibility: visible;
}
body[data-theme="light"] .nav-links {
background: #FFFFFF;
box-shadow: -20px 0 60px rgba(11, 30, 63, 0.15);
}
} @media (max-width: 780px) {
.bg3d-float { display: none; }
} @media (max-width: 780px) {
.hv-scene.v2 .v2-tablet,
.hv-scene.v2 .v2-snippet,
.v2-tablet,
.v2-snippet { display: none !important; } .hv-scene.v2 .v2-robot-wrap { margin: 0 auto; }
} @media (max-width: 780px) {
.hero { padding: 40px 0 30px; }
.hero-inner { min-height: auto; gap: 32px; padding: 0 20px; }
.hero h1, .hero-title { font-size: clamp(32px, 8vw, 48px) !important; }
.hero-desc { font-size: 15.5px; }
.hero-cta { gap: 10px; }
.hero-cta .btn { padding: 12px 18px; font-size: 14px; }
.page-hero { padding: 50px 0 30px; }
.page-hero h1 { font-size: clamp(28px, 7vw, 40px) !important; }
.lead { font-size: 15.5px; line-height: 1.65; }
.container { padding: 0 20px; }
} @media (max-width: 780px) {
.pricing-grid { grid-template-columns: 1fr !important; gap: 20px; }
.price-card.featured { transform: none; }
.price-card { padding: 28px 24px !important; }
.price-card .amt { font-size: 46px !important; }
} @media (max-width: 780px) {
.store-grid { grid-template-columns: 1fr !important; gap: 18px; }
}
@media (max-width: 1024px) and (min-width: 781px) {
.store-grid { grid-template-columns: repeat(2, 1fr) !important; }
} @media (max-width: 780px) {
.blog-grid { grid-template-columns: 1fr !important; gap: 18px; }
} @media (max-width: 780px) {
.service-row {
grid-template-columns: 36px 1fr !important;
grid-template-rows: auto auto auto;
gap: 10px 14px !important;
padding: 20px 16px !important;
}
.service-row .s-num { font-size: 13px; }
.service-row .s-icon { grid-column: 1; grid-row: 2; }
.service-row h3 { grid-column: 2; grid-row: 2; font-size: 17px !important; line-height: 1.25; margin: 0; }
.service-row p { grid-column: 1 / -1; grid-row: 3; font-size: 14px; }
.service-row .s-arrow { display: none; }
} @media (max-width: 780px) {
.stats-row { grid-template-columns: repeat(2, 1fr) !important; gap: 16px; }
.stat-block .n { font-size: 36px !important; }
} @media (max-width: 600px) {
.why-grid { grid-template-columns: 1fr !important; gap: 14px; }
} @media (max-width: 780px) {
.about-split { grid-template-columns: 1fr !important; gap: 28px; }
.about-image { max-width: 100% !important; margin: 0 auto; }
} @media (max-width: 780px) {
.cta-band { padding: 60px 0 60px !important; }
.cta-band h2.display { font-size: clamp(32px, 8vw, 48px) !important; }
.cta-actions { flex-direction: column; gap: 12px; }
.cta-actions .btn { width: 100%; justify-content: center; }
} @media (max-width: 780px) {
.contact-wrap { grid-template-columns: 1fr !important; gap: 32px; }
.contact-form input, .contact-form textarea, .contact-form select {
font-size: 16px !important;
}
.captcha-wrap { flex-wrap: wrap; gap: 10px; }
.captcha-img { width: 130px; }
.captcha-input { width: calc(100% - 200px) !important; min-width: 120px; }
} @media (max-width: 600px) {
.pricing-promise-grid { grid-template-columns: 1fr !important; gap: 14px; margin: 32px 16px 0; }
} @media (max-width: 780px) {
section.sec { padding: 50px 0 !important; }
} @media (max-width: 780px) {
.diag-banner {
grid-template-columns: 1fr !important;
padding: 32px 24px !important;
gap: 24px;
}
.diag-banner h2 { font-size: clamp(26px, 7vw, 38px) !important; }
.diag-visual { display: none; }
} @media (max-width: 780px) {
.hero { padding: 40px 0 30px; }
.hero-inner { min-height: auto; gap: 32px; padding: 0 20px; }
.hero h1, .hero-title { font-size: clamp(32px, 8vw, 48px) !important; }
.hero-desc { font-size: 15.5px; }
.hero-cta { gap: 10px; }
.hero-cta .btn { padding: 12px 18px; font-size: 14px; }
.page-hero { padding: 50px 0 30px; }
.page-hero h1 { font-size: clamp(28px, 7vw, 40px) !important; }
.lead { font-size: 15.5px; line-height: 1.65; } } @media (max-width: 780px) {
.pricing-grid { grid-template-columns: 1fr !important; gap: 20px; }
.price-card.featured { transform: none; }
.price-card { padding: 28px 24px !important; }
.price-card .amt { font-size: 46px !important; }
} @media (max-width: 780px) {
.store-grid { grid-template-columns: 1fr !important; gap: 18px; }
}
@media (max-width: 1024px) and (min-width: 781px) {
.store-grid { grid-template-columns: repeat(2, 1fr) !important; }
} @media (max-width: 780px) {
.blog-grid { grid-template-columns: 1fr !important; gap: 18px; }
} @media (max-width: 780px) {
.service-row {
grid-template-columns: 36px 1fr !important;
grid-template-rows: auto auto auto;
gap: 10px 14px !important;
padding: 20px 16px !important;
}
.service-row .s-num { font-size: 13px; }
.service-row .s-icon { grid-column: 1; grid-row: 2; }
.service-row h3 { grid-column: 2; grid-row: 2; font-size: 17px !important; line-height: 1.25; margin: 0; }
.service-row p { grid-column: 1 / -1; grid-row: 3; font-size: 14px; }
.service-row .s-arrow { display: none; }
} @media (max-width: 780px) {
.stats-row { grid-template-columns: repeat(2, 1fr) !important; gap: 16px; }
.stat-block .n { font-size: 36px !important; }
} @media (max-width: 600px) {
.why-grid { grid-template-columns: 1fr !important; gap: 14px; }
} @media (max-width: 780px) {
.about-split { grid-template-columns: 1fr !important; gap: 28px; }
.about-image { max-width: 100% !important; margin: 0 auto; }
} @media (max-width: 780px) {
.cta-band { padding: 60px 0 60px !important; }
.cta-band h2.display { font-size: clamp(32px, 8vw, 48px) !important; }
.cta-actions { flex-direction: column; gap: 12px; }
.cta-actions .btn { width: 100%; justify-content: center; }
} @media (max-width: 780px) {
.footer { padding: 50px 0 24px !important; }
.footer-top {
grid-template-columns: repeat(3, 1fr) !important;
gap: 28px 18px !important;
text-align: left;
}
.footer-brand { grid-column: 1 / -1; }
.footer-brand p { max-width: 100%; }
.footer-col h4 { font-size: 12px; margin-bottom: 10px; letter-spacing: 0.04em; }
.footer-col ul { gap: 7px; }
.footer-col a { font-size: 13px; }
.footer-bottom {
flex-direction: column;
gap: 14px;
text-align: center;
padding-top: 24px !important;
}
.footer-bottom ul { justify-content: center; }
} @media (max-width: 380px) {
.footer-top { gap: 24px 12px !important; }
.footer-col h4 { font-size: 11px; }
.footer-col a { font-size: 12px; }
} @media (max-width: 780px) {
.contact-wrap { grid-template-columns: 1fr !important; gap: 32px; }
.contact-form input, .contact-form textarea, .contact-form select {
font-size: 16px !important; }
.captcha-wrap { flex-wrap: wrap; gap: 10px; }
.captcha-img { width: 130px; }
.captcha-input { width: calc(100% - 200px) !important; min-width: 120px; }
} @media (max-width: 600px) {
.pricing-promise-grid { grid-template-columns: 1fr !important; gap: 14px; margin: 32px 16px 0; }
} @media (max-width: 780px) {
section.sec { padding: 50px 0 !important; }
} @media (max-width: 780px) {
.diag-banner {
grid-template-columns: 1fr !important;
padding: 32px 24px !important;
gap: 24px;
}
.diag-banner h2 { font-size: clamp(26px, 7vw, 38px) !important; }
.diag-visual { display: none; }
}  .article-section { padding: 60px 0 40px; }
.article-container {
display: grid;
grid-template-columns: 1fr 320px;
gap: 60px;
align-items: start;
}
@media (max-width: 900px) {
.article-container { grid-template-columns: 1fr; gap: 40px; }
} .article-main {
background: var(--surface);
border-radius: var(--r-lg);
padding: 40px 44px;
box-shadow: inset 0 0 0 1px var(--line);
}
@media (max-width: 700px) { .article-main { padding: 28px 20px; } }
.article-meta-top {
display: flex;
gap: 10px;
align-items: center;
font-family: var(--font-mono);
font-size: 11px;
color: var(--ink-3);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 20px;
}
.article-category {
color: var(--accent);
font-weight: 500;
}
.article-dot { opacity: 0.5; }
.article-title {
font-family: var(--font-display);
font-size: clamp(28px, 4vw, 48px);
font-weight: 400;
line-height: 1.15;
color: var(--ink);
margin: 0 0 30px;
}
.article-featured {
margin: 0 0 30px;
border-radius: var(--r);
overflow: hidden;
box-shadow: inset 0 0 0 1px var(--line);
}
.article-featured img { width: 100%; height: auto; display: block; }
.article-content {
font-size: 16px;
line-height: 1.75;
color: var(--ink);
}
.article-content > * { margin-bottom: 20px; }
.article-content > *:last-child { margin-bottom: 0; }
.article-content h1, .article-content h2, .article-content h3, .article-content h4, .article-content h5 {
font-family: var(--font-display);
color: var(--ink);
margin: 40px 0 16px;
line-height: 1.25;
font-weight: 400;
}
.article-content h1 { font-size: 32px; }
.article-content h2 { font-size: 28px; }
.article-content h3 { font-size: 22px; }
.article-content h4 { font-size: 18px; }
.article-content p { color: var(--ink); opacity: 0.92; }
.article-content a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.article-content a:hover { color: var(--accent-2); }
.article-content blockquote {
border-left: 3px solid var(--accent);
padding: 6px 22px;
margin: 30px 0;
font-family: var(--font-display);
font-style: italic;
font-size: 18px;
color: var(--ink-2);
background: var(--bg-2);
border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.article-content pre {
background: var(--bg);
color: var(--ink);
padding: 20px;
border-radius: var(--r);
overflow-x: auto;
font-family: var(--font-mono);
font-size: 13px;
line-height: 1.6;
box-shadow: inset 0 0 0 1px var(--line);
}
.article-content code {
font-family: var(--font-mono);
font-size: 0.9em;
background: var(--bg-2);
padding: 2px 8px;
border-radius: 4px;
color: var(--accent);
}
.article-content pre code {
background: transparent;
padding: 0;
color: var(--ink);
}
.article-content ul, .article-content ol { padding-left: 24px; }
.article-content li { margin-bottom: 8px; }
.article-content img {
max-width: 100%;
height: auto;
border-radius: var(--r);
margin: 20px 0;
}
.article-content hr {
border: none;
border-top: 1px solid var(--line);
margin: 40px 0;
} .article-tags {
margin-top: 40px;
padding-top: 24px;
border-top: 1px solid var(--line);
font-family: var(--font-mono);
font-size: 12px;
color: var(--ink-3);
letter-spacing: 0.05em;
}
.article-tags a {
color: var(--accent);
text-decoration: none;
}
.article-tags a:hover { text-decoration: underline; }
.tags-label { color: var(--ink-3); margin-right: 8px; } .article-nav {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-top: 40px;
padding-top: 24px;
border-top: 1px solid var(--line);
}
@media (max-width: 600px) { .article-nav { grid-template-columns: 1fr; } }
.article-nav-item {
padding: 16px 20px;
background: var(--bg-2);
border-radius: var(--r-sm);
text-decoration: none;
box-shadow: inset 0 0 0 1px var(--line);
transition: all 0.2s;
}
.article-nav-item:hover {
box-shadow: inset 0 0 0 1px var(--accent);
transform: translateY(-2px);
}
.article-nav-next { text-align: right; }
.nav-label {
display: block;
font-family: var(--font-mono);
font-size: 10px;
color: var(--accent);
text-transform: uppercase;
letter-spacing: 0.15em;
margin-bottom: 6px;
}
.nav-title {
font-family: var(--font-display);
font-size: 15px;
color: var(--ink);
line-height: 1.4;
display: block;
} .article-sidebar {
display: flex;
flex-direction: column;
gap: 24px;
position: sticky;
top: 100px;
}
@media (max-width: 900px) { .article-sidebar { position: static; } }
.widget {
background: var(--surface);
border-radius: var(--r);
padding: 24px;
box-shadow: inset 0 0 0 1px var(--line);
}
.widget-title {
font-family: var(--font-mono);
font-size: 11px;
color: var(--ink-3);
text-transform: uppercase;
letter-spacing: 0.15em;
margin: 0 0 16px;
padding-bottom: 12px;
border-bottom: 1px solid var(--line);
font-weight: 500;
}
.widget ul {
list-style: none;
padding: 0;
margin: 0;
}
.widget li {
padding: 10px 0;
border-bottom: 1px solid var(--line);
}
.widget li:last-child { border-bottom: none; padding-bottom: 0; }
.widget a {
color: var(--ink);
text-decoration: none;
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
font-size: 14px;
transition: color 0.15s;
}
.widget a:hover { color: var(--accent); } .widget-recent-posts .rp-title {
font-size: 13px;
line-height: 1.4;
flex: 1;
}
.widget-recent-posts .rp-date {
font-family: var(--font-mono);
font-size: 10px;
color: var(--ink-3);
letter-spacing: 0.05em;
white-space: nowrap;
} .cat-count {
font-family: var(--font-mono);
font-size: 11px;
background: var(--bg-2);
color: var(--ink-3);
padding: 2px 8px;
border-radius: 20px;
min-width: 24px;
text-align: center;
} .widget-cta {
background: linear-gradient(135deg, var(--surface), var(--surface-2));
border-radius: var(--r);
text-align: center;
}
.widget-cta .widget-title { border-bottom: none; padding-bottom: 0; color: var(--accent); }
.widget-cta p {
font-size: 13px;
color: var(--ink-2);
line-height: 1.5;
margin: 0 0 16px;
}
.widget-cta .btn { width: 100%; } .comments-area {
background: var(--surface);
border-radius: var(--r-lg);
padding: 40px;
box-shadow: inset 0 0 0 1px var(--line);
}
.comments-title {
font-family: var(--font-display);
font-size: 24px;
color: var(--ink);
margin: 0 0 24px;
}
.comment-list { list-style: none; padding: 0; }
.comment-body {
padding: 20px;
background: var(--bg-2);
border-radius: var(--r);
margin-bottom: 16px;
box-shadow: inset 0 0 0 1px var(--line);
}
.comment-author {
font-family: var(--font-mono);
font-size: 13px;
color: var(--accent);
margin-bottom: 8px;
}
.comment-metadata {
font-family: var(--font-mono);
font-size: 11px;
color: var(--ink-3);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 12px;
}
.comment-form textarea, .comment-form input[type=text], .comment-form input[type=email], .comment-form input[type=url] {
width: 100%;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: var(--r-sm);
padding: 12px 16px;
color: var(--ink);
font-family: inherit;
font-size: 14px;
margin-bottom: 12px;
}
.comment-form label {
font-family: var(--font-mono);
font-size: 11px;
color: var(--ink-3);
text-transform: uppercase;
letter-spacing: 0.1em;
display: block;
margin-bottom: 6px;
}
.form-submit input[type=submit] {
background: var(--accent);
color: #0B1220;
border: none;
padding: 12px 28px;
border-radius: var(--r-sm);
font-family: var(--font-mono);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.1em;
font-size: 12px;
cursor: pointer;
} .blog-pagination {
display: flex;
justify-content: center;
gap: 8px;
margin-top: 40px;
}
.blog-pagination .page-numbers {
padding: 10px 16px;
background: var(--surface);
border-radius: var(--r-sm);
color: var(--ink);
text-decoration: none;
font-family: var(--font-mono);
font-size: 13px;
box-shadow: inset 0 0 0 1px var(--line);
transition: all 0.15s;
}
.blog-pagination .page-numbers.current {
background: var(--accent);
color: #0B1220;
font-weight: 600;
}
.blog-pagination .page-numbers:hover:not(.current) {
box-shadow: inset 0 0 0 1px var(--accent);
color: var(--accent);
} .eyebrow {
display: inline-block;
font-family: var(--font-mono);
font-size: 11px;
color: var(--accent);
text-transform: uppercase;
letter-spacing: 0.2em;
margin-bottom: 16px;
padding: 4px 12px;
background: rgba(255, 210, 74, 0.08);
border-radius: 20px;
box-shadow: inset 0 0 0 1px rgba(255, 210, 74, 0.15);
} .widget { padding: 18px 20px; }
.widget-title {
font-size: 10px;
letter-spacing: 0.12em;
margin: 0 0 12px;
padding-bottom: 10px;
}
.widget a { font-size: 12px; gap: 8px; }
.widget li { padding: 7px 0; }
.widget-recent-posts .rp-title { font-size: 11px; line-height: 1.35; }
.widget-recent-posts .rp-date { font-size: 9px; }
.cat-count { font-size: 10px; padding: 1px 6px; }
.widget-cta p { font-size: 12px; }
.widget-cta .btn { font-size: 11px; padding: 8px 14px; } .article-sidebar { gap: 16px; } .blog-card { opacity: 1 !important; transform: none !important; transition: transform 0.25s ease !important; }
.blog-card.observe { animation: none !important; } @media (max-width: 900px) {
.bg3d-grid {
animation: none !important;
}
} .socials a.soc-ig:hover { background: linear-gradient(45deg, #F58529, #DD2A7B, #8134AF, #515BD4); color: #fff !important; }
.socials a.soc-in:hover { background: #0A66C2; color: #fff !important; }
.socials a.soc-yt:hover { background: #FF0000; color: #fff !important; }
.socials a.soc-x:hover  { background: #000;    color: #fff !important; }
body[data-theme="light"] .socials a.soc-ig:hover,
body[data-theme="light"] .socials a.soc-in:hover,
body[data-theme="light"] .socials a.soc-yt:hover,
body[data-theme="light"] .socials a.soc-x:hover { color: #fff !important; } .tg-float { border-radius: 28px !important; }  .widget h2.widget-title,
.widget h3.widget-title,
.widget h4.widget-title,
.widget h2,
.widget h3,
.widget h4,
aside .widget h2,
aside .widget h3,
aside .widget h4 {
font-family: var(--font-mono) !important;
font-size: 11px !important;
color: var(--ink-3) !important;
text-transform: uppercase !important;
letter-spacing: 0.15em !important;
margin: 0 0 16px !important;
padding-bottom: 12px !important;
border-bottom: 1px solid var(--line) !important;
font-weight: 500 !important;
} .widget_search .search-form,
.widget-search form,
.wp-block-search {
display: flex;
gap: 8px;
align-items: center;
}
.widget_search .search-field,
.widget-search input[type="search"],
.widget_search input[type="text"],
.wp-block-search__input {
flex: 1;
background: var(--surface-2) !important;
border: 1px solid var(--line) !important;
color: var(--ink) !important;
padding: 8px 12px !important;
font-size: 13px !important;
border-radius: 6px !important;
font-family: var(--font-sans) !important;
outline: none;
min-width: 0;
height: 34px !important;
box-sizing: border-box;
}
.widget_search .search-field:focus,
.widget-search input[type="search"]:focus,
.wp-block-search__input:focus {
border-color: var(--accent) !important;
}
.widget_search .search-submit,
.widget-search input[type="submit"],
.widget-search button[type="submit"],
.wp-block-search__button {
background: var(--accent) !important;
color: #0A1628 !important;
padding: 8px 14px !important;
font-size: 12px !important;
font-weight: 600 !important;
border-radius: 6px !important;
border: none !important;
cursor: pointer;
height: 34px !important;
box-sizing: border-box;
white-space: nowrap;
}
.widget_search .search-submit:hover,
.widget-search input[type="submit"]:hover,
.widget-search button[type="submit"]:hover,
.wp-block-search__button:hover {
background: var(--accent-2) !important;
} .widget_recent_entries ul,
.widget_recent_posts ul,
.wp-block-latest-posts,
.wp-block-latest-posts ul {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
}
.widget_recent_entries li,
.widget_recent_posts li,
.wp-block-latest-posts li,
.wp-block-latest-posts__list li {
padding: 10px 0 !important;
border-bottom: 1px solid var(--line);
font-size: 13px !important;
line-height: 1.4 !important;
}
.widget_recent_entries li:last-child,
.widget_recent_posts li:last-child,
.wp-block-latest-posts li:last-child {
border-bottom: none;
}
.widget_recent_entries a,
.widget_recent_posts a,
.wp-block-latest-posts a {
color: var(--ink) !important;
text-decoration: none !important;
font-size: 13px !important;
line-height: 1.4 !important;
display: block;
}
.widget_recent_entries a:hover,
.widget_recent_posts a:hover,
.wp-block-latest-posts a:hover {
color: var(--accent) !important;
} .widget_categories ul,
.wp-block-categories {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
}
.widget_categories li,
.wp-block-categories li {
padding: 8px 0 !important;
border-bottom: 1px solid var(--line);
font-size: 13px !important;
}
.widget_categories li:last-child,
.wp-block-categories li:last-child {
border-bottom: none;
}
.widget_categories a,
.wp-block-categories a {
color: var(--ink) !important;
font-size: 13px !important;
}
.widget_categories a:hover,
.wp-block-categories a:hover {
color: var(--accent) !important;
} aside .widget,
.sidebar .widget {
padding: 18px 20px !important;
} .widget_search,
.widget-search,
.wp-block-search {
overflow: hidden;
}
.widget_search .search-form,
.widget-search form,
.wp-block-search__inside-wrapper {
display: flex !important;
gap: 6px !important;
align-items: stretch !important;
max-width: 100% !important;
flex-wrap: nowrap !important;
}
.widget_search .search-form label,
.widget-search label {
flex: 1;
min-width: 0;
margin: 0 !important;
}
.widget_search .search-field,
.widget-search input[type="search"],
.wp-block-search__input {
width: 100% !important;
flex: 1 1 auto !important;
min-width: 0 !important;
max-width: 100% !important;
height: 32px !important;
padding: 6px 10px !important;
font-size: 12px !important;
box-sizing: border-box !important;
}
.widget_search .search-submit,
.widget-search input[type="submit"],
.widget-search button[type="submit"],
.wp-block-search__button {
flex: 0 0 auto !important;
height: 32px !important;
padding: 6px 12px !important;
font-size: 11px !important;
box-sizing: border-box !important;
white-space: nowrap;
} @media (max-width: 480px) {
.widget_search .search-form,
.widget-search form,
.wp-block-search__inside-wrapper {
flex-direction: column !important;
}
.widget_search .search-submit,
.wp-block-search__button {
width: 100% !important;
}
}  .wp-block-search__label,
.widget_search .screen-reader-text,
.widget_search label {
display: none !important;
} .wp-block-search__inside-wrapper {
display: flex !important;
gap: 6px !important;
width: 100% !important;
max-width: 100% !important;
}
.wp-block-search__input,
.widget_search input[type="search"],
.widget_search input[type="text"] {
flex: 1 1 auto !important;
width: 100% !important;
min-width: 0 !important;
height: 32px !important;
padding: 6px 10px !important;
font-size: 12px !important;
background: var(--surface-2) !important;
border: 1px solid var(--line) !important;
border-radius: 6px !important;
color: var(--ink) !important;
box-sizing: border-box !important;
}
.wp-block-search__button,
.widget_search input[type="submit"] {
flex: 0 0 auto !important;
padding: 6px 14px !important;
height: 32px !important;
font-size: 11px !important;
box-sizing: border-box !important;
} .widget_recent_comments,
.wp-block-latest-comments,
#recent-comments {
display: none !important;
} [id*="recent-comments"],
[class*="recent-comments"],
[class*="recent_comments"],
[class*="latest-comments"],
[class*="latest_comments"],
.widget-recent-comments,
.widget.widget_recent_comments,
li.widget_recent_comments,
section.widget_recent_comments,
aside .widget_recent_comments,
.wp-block-latest-comments {
display: none !important;
visibility: hidden !important;
height: 0 !important;
overflow: hidden !important;
margin: 0 !important;
padding: 0 !important;
} .article-sidebar .widget h2,
.article-sidebar .widget h3,
.article-sidebar .widget h4,
.article-sidebar .widget-title,
.sidebar .widget h2,
.sidebar .widget h3,
.sidebar .widget h4,
.sidebar .widget-title,
aside.article-sidebar .widget-title,
aside .widget h2.widget-title,
aside .widget h3.widget-title,
aside .widget h4.widget-title {
color: #A8B3C7 !important;
opacity: 1 !important;
}
body[data-theme="light"] .article-sidebar .widget h2,
body[data-theme="light"] .article-sidebar .widget h3,
body[data-theme="light"] .article-sidebar .widget h4,
body[data-theme="light"] .article-sidebar .widget-title,
body[data-theme="light"] aside.article-sidebar .widget-title {
color: #334155 !important;
} .article-sidebar section[id*="recent-comments"],
.article-sidebar div[id*="recent-comments"],
.article-sidebar .widget:has(> h2:contains("Recent Comments")),
.article-sidebar .widget:has(> h3:contains("Recent Comments")),
.article-sidebar .widget:has(> h4:contains("Recent Comments")),
.article-sidebar .widget.widget_recent_comments,
aside .widget_recent_comments,
aside [class*="recent-comments"],
aside [id*="recent-comments"],
aside [id^="recent-comments"] {
display: none !important;
height: 0 !important;
padding: 0 !important;
margin: 0 !important;
overflow: hidden !important;
visibility: hidden !important;
}
.page-hero { padding: 20px 0 20px !important; }
section.sec { padding: 30px 0 60px !important; } @media (max-width: 980px) {
.nav-logo { display: flex !important; align-items: center; }
.nav-logo-icon {
height: 32px !important;
width: auto !important;
display: block !important;
}
.nav-logo-text { font-size: 18px !important; }
}  .mql-pagination-wrap {
margin-top: 60px;
display: flex;
justify-content: center;
width: 100%;
}
.mql-pagination {
display: flex;
gap: 8px;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.mql-pagination .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
height: 44px;
padding: 0 14px;
border-radius: 10px;
background: rgba(11, 30, 63, 0.06);
border: 1px solid rgba(11, 30, 63, 0.12);
color: var(--ink, #0B1E3F);
font-size: 14px;
font-weight: 600;
text-decoration: none;
transition: all 0.2s ease;
}
.mql-pagination .page-numbers:hover:not(.current) {
background: rgba(255, 210, 74, 0.14);
border-color: rgba(255, 210, 74, 0.4);
color: #B8860B;
}
.mql-pagination .page-numbers.current {
background: #FFD24A;
border-color: #FFD24A;
color: #05080F;
}
.mql-pagination .page-numbers.dots {
background: transparent;
border: none;
color: rgba(11, 30, 63, 0.4);
} body[data-theme="dark"] .mql-pagination .page-numbers {
background: rgba(255, 255, 255, 0.04);
border-color: rgba(255, 255, 255, 0.08);
color: #E8EEFC;
}
body[data-theme="dark"] .mql-pagination .page-numbers.current {
background: #FFD24A;
color: #05080F;
} @media (max-width: 600px) {
.mql-pagination-wrap { margin-top: 40px; }
.mql-pagination { gap: 6px; }
.mql-pagination .page-numbers {
min-width: 38px;
height: 38px;
padding: 0 10px;
font-size: 13px;
}
}  .article-sidebar .widget_block,
.article-sidebar .widget.widget_block {
background: var(--surface) !important;
color: var(--ink) !important;
padding: 24px !important;
border-radius: var(--r) !important;
box-shadow: inset 0 0 0 1px var(--line) !important;
} .article-sidebar .widget_block .wp-block-latest-posts,
.article-sidebar .widget_block .wp-block-categories,
.article-sidebar .widget_block ul,
.article-sidebar .widget_block ol {
background: transparent !important;
padding: 0 !important;
margin: 0 !important;
list-style: none !important;
} .article-sidebar .widget_block li {
background: transparent !important;
padding: 10px 0 !important;
border-bottom: 1px solid var(--line) !important;
color: var(--ink) !important;
}
.article-sidebar .widget_block li:last-child {
border-bottom: none !important;
} .article-sidebar .widget_block a {
color: var(--ink) !important;
text-decoration: none !important;
background: transparent !important;
}
.article-sidebar .widget_block a:hover {
color: var(--accent) !important;
} .article-sidebar .widget_block h1,
.article-sidebar .widget_block h2,
.article-sidebar .widget_block h3,
.article-sidebar .widget_block h4,
.article-sidebar .widget_block h5,
.article-sidebar .widget_block h6 {
background: transparent !important;
color: var(--ink-3) !important;
font-family: var(--font-mono) !important;
font-size: 11px !important;
text-transform: uppercase !important;
letter-spacing: 0.15em !important;
font-weight: 500 !important;
margin: 0 0 16px !important;
padding-bottom: 12px !important;
border-bottom: 1px solid var(--line) !important;
} .article-sidebar .widget_search input[type="search"],
.article-sidebar .widget_block input[type="search"],
.article-sidebar .wp-block-search__input {
background: var(--bg) !important;
border: 1px solid var(--line) !important;
color: var(--ink) !important;
} .article-sidebar .wp-block-search__button {
background: var(--accent) !important;
color: #0B1220 !important;
border: none !important;
}