@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('../fonts/inter-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('../fonts/inter-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;src:url('../fonts/space-grotesk-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;src:url('../fonts/space-grotesk-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} :root { --teal: #14c9b8; --teal-dark: #3ce4d3; --teal-deep: #0a9e90; --teal-light: rgba(20, 201, 184, 0.12); --teal-glow: rgba(20, 201, 184, 0.22); --blue: #38bdf8; --violet: #8b5cf6; --navy: #0b1622; --navy-soft: #122636; --ink: #e8eff5; --slate: #a3b3c2; --mist: #7e93a3; --bg: #05090f; --bg2: #070d15; --panel: #0a1119; --card: #0c141e; --line: rgba(255, 255, 255, 0.08); --line-soft: rgba(255, 255, 255, 0.05); --amber: #fbbf24; --radius: 14px; --radius-lg: 22px; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4); --shadow-md: 0 10px 34px rgba(0, 0, 0, 0.45); --shadow-lg: 0 24px 70px rgba(0, 0, 0, 0.55); --glow-teal: 0 0 40px rgba(20, 201, 184, 0.16); --font-head: "Space Grotesk", "Inter", sans-serif; --font-body: "Inter", system-ui, sans-serif; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); background: radial-gradient(1100px 600px at 80% -200px, rgba(56, 189, 248, 0.055), transparent 60%), radial-gradient(900px 550px at -10% 30%, rgba(139, 92, 246, 0.05), transparent 55%), var(--bg); color: var(--ink); line-height: 1.65; -webkit-font-smoothing: antialiased; } ::selection { background: rgba(20, 201, 184, 0.35); color: #fff; } img { max-width: 100%; display: block; } a { color: var(--teal-dark); text-decoration: none; } a:hover { color: #7ff2e6; } h1, h2, h3, h4 { font-family: var(--font-head); color: #f3f8fb; line-height: 1.16; letter-spacing: -0.02em; } h1 { font-size: clamp(2.1rem, 4.8vw, 3.6rem); font-weight: 700; } h2 { font-size: clamp(1.5rem, 3vw, 2.35rem); font-weight: 700; } h3 { font-size: 1.18rem; font-weight: 600; } .container { max-width: 1180px; margin: 0 auto; padding: 0 22px; } section { padding: 80px 0; position: relative; } section[style*="background:#fff"], div[style*="background:#fff"]:not(.btn):not(.chip) { background: var(--bg2) !important; } a.btn[style*="background:#fff"], button[style*="background:#fff"], span[style*="background:#fff"] { background: rgba(255, 255, 255, 0.08) !important; color: #fff !important; border-color: rgba(255, 255, 255, 0.18) !important; } .topbar { background: rgba(3, 6, 10, 0.9); border-bottom: 1px solid var(--line-soft); color: #8ea3b2; font-size: 0.8rem; padding: 7px 0; letter-spacing: 0.02em; } .topbar .container { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; } .topbar a { color: var(--teal-dark); font-weight: 600; } .topbar .tb-loc { opacity: 0.85; } header.site-header { position: sticky; top: 0; z-index: 1000; background: rgba(5, 9, 15, 0.78); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); border-bottom: 1px solid var(--line-soft); transition: box-shadow 0.3s ease, background 0.3s ease; } header.site-header.scrolled { background: rgba(5, 9, 15, 0.92); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); } .nav { display: flex; align-items: center; justify-content: space-between; height: 72px; } .brand { display: flex; align-items: center; gap: 10px; } .brand img, .brand svg { height: 42px; width: auto; } header.site-header .brand img, .lp-header .brand img { filter: brightness(0) invert(1); opacity: 0.96; } .brand-name { font-family: var(--font-head); font-weight: 700; font-size: 1.25rem; color: #fff; } .brand-name span { color: var(--teal); } .brand-tag { font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mist); display: block; margin-top: -3px; } .nav-links { display: flex; align-items: center; gap: 4px; list-style: none; } .nav-links > li { position: relative; } .nav-links > li > a { display: block; padding: 10px 13px; font-weight: 600; font-size: 0.92rem; color: #cdd9e3; border-radius: 9px; transition: 0.2s; } .nav-links > li > a:hover, .nav-links > li > a.active { color: var(--teal-dark); background: var(--teal-light); } .dropdown { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(8px); background: rgba(11, 18, 27, 0.97); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg), var(--glow-teal); padding: 12px; min-width: 540px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; opacity: 0; visibility: hidden; transition: 0.22s ease; } .dropdown.dropdown-sm { min-width: 300px; grid-template-columns: 1fr; } li.has-drop:hover .dropdown, li.has-drop:focus-within .dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .dropdown a { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; transition: 0.15s; } .dropdown a:hover { background: var(--teal-light); } .dropdown .d-ic { font-size: 1.1rem; line-height: 1.3; } .dropdown .d-t { font-weight: 600; font-size: 0.88rem; color: #eaf2f7; display: block; } .dropdown .d-s { font-size: 0.74rem; color: var(--mist); display: block; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 26px; border-radius: 12px; font-weight: 700; font-size: 0.95rem; font-family: var(--font-body); cursor: pointer; border: none; transition: 0.22s ease; letter-spacing: 0.01em; } .btn-primary { background: linear-gradient(135deg, #17d6c4, var(--teal-deep)); color: #04211d !important; box-shadow: 0 6px 22px rgba(20, 201, 184, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.25); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(20, 201, 184, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.25); } .btn-ghost { background: rgba(255, 255, 255, 0.04); color: #eaf2f7 !important; border: 1px solid rgba(255, 255, 255, 0.16); } .btn-ghost:hover { border-color: var(--teal); color: var(--teal-dark) !important; background: var(--teal-light); } .btn-dark { background: rgba(255, 255, 255, 0.09); color: #fff !important; border: 1px solid var(--line); } .btn-dark:hover { background: rgba(255, 255, 255, 0.16); } .btn-wa { background: #22c55e; color: #052e12 !important; } .btn-wa:hover { background: #34d96f; transform: translateY(-2px); } .btn-sm { padding: 9px 16px; font-size: 0.85rem; } .nav-cta { display: flex; gap: 10px; align-items: center; } .nav-toggle { display: none; background: none; border: none; font-size: 1.7rem; color: #eaf2f7; cursor: pointer; } .hero { position: relative; overflow: hidden; background: radial-gradient(1000px 540px at 78% -12%, rgba(20, 201, 184, 0.14), transparent 58%), radial-gradient(820px 480px at 8% 108%, rgba(139, 92, 246, 0.12), transparent 58%), radial-gradient(640px 420px at 100% 80%, rgba(56, 189, 248, 0.08), transparent 55%), linear-gradient(180deg, #060b12 0%, var(--bg) 100%); padding: 96px 0 88px; } .hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(148, 190, 210, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(148, 190, 210, 0.06) 1px, transparent 1px); background-size: 46px 46px; mask-image: radial-gradient(ellipse 80% 72% at 50% 28%, black 25%, transparent 74%); -webkit-mask-image: radial-gradient(ellipse 80% 72% at 50% 28%, black 25%, transparent 74%); } .hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(20, 201, 184, 0.4), rgba(139, 92, 246, 0.3), transparent); } .hero .container { position: relative; display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 54px; align-items: center; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(20, 201, 184, 0.3); color: var(--teal-dark); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 7px 15px; border-radius: 100px; box-shadow: var(--glow-teal); margin-bottom: 22px; } .eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 4px var(--teal-glow); animation: pulse 2.2s infinite; } @keyframes pulse { 0%,100% { box-shadow: 0 0 0 3px var(--teal-glow); } 50% { box-shadow: 0 0 0 8px transparent; } } .hero h1 .grad { color: var(--teal-dark); } @supports ((-webkit-background-clip: text) or (background-clip: text)) { .hero h1 .grad { background: linear-gradient(105deg, var(--teal) 5%, var(--blue) 55%, var(--violet) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } } .hero p.lede { font-size: 1.1rem; color: var(--slate); margin: 20px 0 32px; max-width: 58ch; } .hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; } .hero-trust { display: flex; gap: 30px; margin-top: 42px; flex-wrap: wrap; } .ht-item strong { font-family: var(--font-head); font-size: 1.6rem; display: block; color: #fff; } @supports ((-webkit-background-clip: text) or (background-clip: text)) { .ht-item strong { background: linear-gradient(120deg, #fff, #9fd9d2); -webkit-background-clip: text; background-clip: text; color: transparent; } } .ht-item span { font-size: 0.78rem; color: var(--mist); letter-spacing: 0.05em; text-transform: uppercase; } .hero-visual { position: relative; } .hv-anim { position: relative; width: 100%; aspect-ratio: 0.94; min-height: 380px; border-radius: var(--radius-lg); border: 1px solid rgba(20, 201, 184, 0.22); background: radial-gradient(420px 300px at 70% 25%, rgba(20, 201, 184, 0.14), transparent 60%), radial-gradient(380px 300px at 20% 85%, rgba(139, 92, 246, 0.13), transparent 60%), linear-gradient(165deg, #0a141e 0%, #05090f 100%); box-shadow: var(--shadow-lg), var(--glow-teal); overflow: hidden; } .hv-anim::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(127,230,219,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(127,230,219,0.05) 1px, transparent 1px); background-size: 30px 30px; mask-image: radial-gradient(ellipse 90% 90% at 50% 50%, black 30%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse 90% 90% at 50% 50%, black 30%, transparent 80%); } .hv-anim canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .hv-anim-badge { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 2; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; background: rgba(6, 12, 18, 0.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(20, 201, 184, 0.3); border-radius: 100px; padding: 8px 16px; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal-dark); } .hv-anim-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 4px var(--teal-glow); animation: pulse 2.2s infinite; } .hv-emblem { position: absolute; top: 50%; left: 50%; width: 46%; max-width: 230px; transform: translate(-50%, -54%); perspective: 900px; z-index: 1; } .hv-emblem::before { content: ""; position: absolute; left: 50%; top: 50%; width: 150%; height: 150%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(20, 201, 184, 0.16), transparent 62%); pointer-events: none; } .hv-emblem::after { content: ""; position: absolute; left: 50%; bottom: -14%; width: 62%; height: 14px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(ellipse, rgba(20, 201, 184, 0.3), transparent 70%); filter: blur(4px); animation: emblemShadow 7s linear infinite; } .hv-emblem svg { width: 100%; height: auto; display: block; transform-style: preserve-3d; animation: emblemSpin 7s linear infinite; filter: drop-shadow(0 0 26px rgba(20, 201, 184, 0.35)); backface-visibility: visible; } @keyframes emblemSpin { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } } @keyframes emblemShadow { 0%, 50%, 100% { transform: translateX(-50%) scaleX(1); opacity: 0.9; } 25%, 75% { transform: translateX(-50%) scaleX(0.35); opacity: 0.5; } } @media (prefers-reduced-motion: reduce) { .hv-emblem svg, .hv-emblem::after { animation: none; } } @media (max-width: 1020px) { .hv-anim { aspect-ratio: 1.3; } .hv-emblem { max-width: 180px; } } .hv-card { background: linear-gradient(165deg, rgba(18, 38, 54, 0.92) 0%, rgba(9, 17, 26, 0.96) 100%); border: 1px solid rgba(20, 201, 184, 0.22); border-radius: var(--radius-lg); padding: 30px; color: #d8e8e6; box-shadow: var(--shadow-lg), var(--glow-teal); position: relative; overflow: hidden; } .hv-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(127,230,219,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(127,230,219,0.06) 1px, transparent 1px); background-size: 26px 26px; } .hv-head { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; position: relative; z-index: 1; } .hv-head .hv-dot { width: 10px; height: 10px; border-radius: 50%; } .hv-rows { position: relative; z-index: 1; display: grid; gap: 10px; } .hv-row { display: flex; align-items: center; justify-content: space-between; background: rgba(255,255,255,0.045); border: 1px solid rgba(127,230,219,0.16); padding: 11px 14px; border-radius: 11px; font-size: 0.88rem; } .hv-row .ok { color: #4ade80; font-weight: 700; font-size: 0.78rem; letter-spacing: 0.04em; } .hv-float { position: absolute; background: rgba(12, 22, 32, 0.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 13px; padding: 12px 16px; box-shadow: var(--shadow-lg); border: 1px solid rgba(20, 201, 184, 0.3); z-index: 2; font-size: 0.82rem; font-weight: 600; color: #eaf2f7; display: flex; align-items: center; gap: 9px; } .hv-float.f1 { top: -16px; right: -10px; animation: float 5s ease-in-out infinite; } .hv-float.f2 { bottom: -16px; left: -12px; animation: float 6s ease-in-out infinite reverse; } .hv-float .big { font-size: 1.15rem; } @keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } } .hero-fx { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .hero-fx i { position: absolute; display: block; } .hero-fx .orb { width: 560px; height: 560px; border-radius: 50%; filter: blur(70px); opacity: 0.55; mix-blend-mode: screen; will-change: transform; } .hero-fx .o1 { top: -18%; left: 52%; background: radial-gradient(circle at 35% 35%, rgba(20, 201, 184, 0.5), rgba(20, 201, 184, 0.06) 60%, transparent 70%); animation: orbDrift1 16s ease-in-out infinite alternate; } .hero-fx .o2 { bottom: -30%; left: -14%; width: 640px; height: 640px; background: radial-gradient(circle at 60% 40%, rgba(139, 92, 246, 0.42), rgba(139, 92, 246, 0.05) 60%, transparent 70%); animation: orbDrift2 20s ease-in-out infinite alternate; } .hero-fx .o3 { top: 22%; right: -16%; width: 480px; height: 480px; background: radial-gradient(circle at 45% 55%, rgba(56, 189, 248, 0.38), rgba(56, 189, 248, 0.05) 60%, transparent 70%); animation: orbDrift3 24s ease-in-out infinite alternate; } @keyframes orbDrift1 { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-120px, 70px) scale(1.15); } 100% { transform: translate(60px, 140px) scale(0.92); } } @keyframes orbDrift2 { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(140px, -80px) scale(1.12); } 100% { transform: translate(40px, -160px) scale(1.02); } } @keyframes orbDrift3 { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-90px, -60px) scale(0.9); } 100% { transform: translate(-160px, 40px) scale(1.1); } } .hero-fx .beam { top: -40%; left: -30%; width: 60%; height: 180%; background: linear-gradient(100deg, transparent 30%, rgba(127, 230, 219, 0.05) 46%, rgba(139, 92, 246, 0.07) 52%, rgba(127, 230, 219, 0.05) 58%, transparent 70%); transform: rotate(10deg); animation: beamSweep 11s ease-in-out infinite; will-change: transform; } @keyframes beamSweep { 0%, 100% { transform: translateX(-30%) rotate(10deg); opacity: 0; } 12% { opacity: 1; } 55% { opacity: 1; } 70% { transform: translateX(260%) rotate(10deg); opacity: 0; } 71% { transform: translateX(-30%) rotate(10deg); opacity: 0; } } .hero-fx .ring { top: 50%; right: 4%; width: 520px; height: 520px; margin-top: -260px; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0%, rgba(20, 201, 184, 0.35) 12%, transparent 26%, transparent 55%, rgba(139, 92, 246, 0.28) 68%, transparent 82%); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), black calc(100% - 1px)); mask: radial-gradient(farthest-side, transparent calc(100% - 2px), black calc(100% - 1px)); animation: ringSpin 14s linear infinite; opacity: 0.8; } @keyframes ringSpin { to { transform: rotate(360deg); } } @media (max-width: 1020px) { .hero-fx .ring { display: none; } .hero-fx .orb { width: 420px; height: 420px; filter: blur(55px); } } @media (prefers-reduced-motion: reduce) { .hero-fx .orb, .hero-fx .beam, .hero-fx .ring { animation: none; } .hero-fx .beam { opacity: 0.5; transform: translateX(80%) rotate(10deg); } .marquee { animation: none; flex-wrap: wrap; width: auto; justify-content: center; } } .sec-index { border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); background: rgba(255, 255, 255, 0.015); overflow-x: auto; } .sec-index .container { display: flex; gap: 8px; padding-top: 0; padding-bottom: 0; } .sec-index a { padding: 14px 16px; white-space: nowrap; font-family: var(--font-head); font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mist); border-left: 1px solid var(--line-soft); transition: 0.2s; } .sec-index a:last-child { border-right: 1px solid var(--line-soft); } .sec-index a b { color: var(--teal-dark); font-weight: 700; margin-right: 6px; } .sec-index a:hover { color: #eaf2f7; background: rgba(20, 201, 184, 0.06); } .marquee-wrap { background: rgba(255, 255, 255, 0.015); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); padding: 24px 0; overflow: hidden; position: relative; } .marquee-wrap::before, .marquee-wrap::after { content: ""; position: absolute; top: 0; bottom: 0; width: 120px; z-index: 2; pointer-events: none; } .marquee-wrap::before { left: 0; background: linear-gradient(90deg, var(--bg), transparent); } .marquee-wrap::after { right: 0; background: linear-gradient(270deg, var(--bg), transparent); } .marquee-label { text-align: center; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mist); margin-bottom: 15px; font-weight: 700; } .marquee { display: flex; gap: 14px; width: max-content; animation: scroll 48s linear infinite; } .marquee:hover { animation-play-state: paused; } @keyframes scroll { to { transform: translateX(-50%); } } .chip { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; background: rgba(255, 255, 255, 0.035); border: 1px solid var(--line); border-radius: 100px; padding: 8px 18px; font-weight: 600; font-size: 0.88rem; color: var(--slate); transition: 0.2s; } .chip:hover { border-color: rgba(20, 201, 184, 0.4); color: #eaf2f7; } .chip b { color: var(--teal-dark); } .sec-head { text-align: center; max-width: 760px; margin: 0 auto 48px; } .sec-head .kicker { color: var(--teal-dark); font-weight: 700; font-size: 0.76rem; letter-spacing: 0.22em; text-transform: uppercase; display: inline-block; margin-bottom: 12px; padding: 5px 14px; border: 1px solid rgba(20, 201, 184, 0.25); border-radius: 100px; background: rgba(20, 201, 184, 0.05); } .sec-head p { color: var(--slate); margin-top: 14px; } .grid { display: grid; gap: 18px; } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } .grid-2 { grid-template-columns: repeat(2, 1fr); } .card { background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px; box-shadow: var(--shadow-sm); transition: 0.28s ease; position: relative; overflow: hidden; display: block; } .card::before { content: ""; position: absolute; top: 0; left: 24px; right: 24px; height: 1px; background: linear-gradient(90deg, transparent, rgba(20, 201, 184, 0.35), transparent); opacity: 0; transition: 0.3s; } .card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md), var(--glow-teal); border-color: rgba(20, 201, 184, 0.4); } .card:hover::before { opacity: 1; } .card .c-ic { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; background: var(--teal-light); border: 1px solid rgba(20, 201, 184, 0.2); margin-bottom: 16px; } .card h3 { margin-bottom: 6px; } .card p { color: var(--slate); font-size: 0.92rem; } .card .c-brands { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 6px; } .mini-chip { font-size: 0.72rem; font-weight: 600; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); border-radius: 100px; padding: 3px 10px; color: var(--slate); } .card .c-link { display: inline-block; margin-top: 14px; font-weight: 700; font-size: 0.88rem; color: var(--teal-dark); } .card:hover .c-link { color: #7ff2e6; } .feat { display: flex; gap: 16px; align-items: flex-start; } .feat .f-ic { flex: 0 0 46px; height: 46px; border-radius: 12px; background: var(--teal-light); border: 1px solid rgba(20, 201, 184, 0.2); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; } .feat h3 { font-size: 1.02rem; margin-bottom: 4px; } .feat p { font-size: 0.88rem; color: var(--slate); } .band-dark { background: radial-gradient(720px 400px at 88% -10%, rgba(20, 201, 184, 0.16), transparent 55%), radial-gradient(520px 320px at 4% 110%, rgba(139, 92, 246, 0.14), transparent 55%), linear-gradient(165deg, #0e2131, #081019); border: 1px solid rgba(20, 201, 184, 0.18); color: #d8e8e6; border-radius: var(--radius-lg); padding: 56px 48px; position: relative; overflow: hidden; box-shadow: var(--shadow-md); } .band-dark::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(127,230,219,0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(127,230,219,0.045) 1px, transparent 1px); background-size: 34px 34px; mask-image: radial-gradient(ellipse 60% 70% at 85% 15%, black 20%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 60% 70% at 85% 15%, black 20%, transparent 75%); } .band-dark > * { position: relative; z-index: 1; } .band-dark h2 { color: #fff; } .band-dark p { color: #9fc0bd; } .review-card { background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px; box-shadow: var(--shadow-sm); transition: 0.25s; } .review-card:hover { border-color: rgba(20, 201, 184, 0.3); transform: translateY(-3px); } .stars { color: var(--amber); letter-spacing: 2px; margin-bottom: 12px; font-size: 0.95rem; } .review-card blockquote { font-size: 0.93rem; color: var(--slate); font-style: normal; } .review-who { display: flex; align-items: center; gap: 12px; margin-top: 18px; } .review-who .avatar { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--teal), var(--violet)); color: #fff; font-weight: 700; font-family: var(--font-head); } .review-who b { display: block; color: #eaf2f7; font-size: 0.92rem; } .review-who span { font-size: 0.78rem; color: var(--mist); } .city-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .city { background: rgba(255, 255, 255, 0.025); border: 1px solid var(--line); border-radius: 12px; padding: 13px 16px; font-weight: 600; font-size: 0.9rem; color: #dbe6ee; display: flex; justify-content: space-between; align-items: center; transition: 0.2s; } .city:hover { border-color: rgba(20, 201, 184, 0.45); transform: translateY(-2px); box-shadow: var(--glow-teal); } .city span { font-size: 0.72rem; color: var(--teal-dark); font-weight: 700; } .page-hero { background: radial-gradient(760px 380px at 88% -20%, rgba(20, 201, 184, 0.13), transparent 60%), radial-gradient(560px 320px at 0% 120%, rgba(139, 92, 246, 0.09), transparent 55%), linear-gradient(180deg, #060b12, var(--bg)); border-bottom: 1px solid var(--line-soft); padding: 64px 0 56px; position: relative; overflow: hidden; } .page-hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(148,190,210,0.055) 1px, transparent 1px), linear-gradient(90deg, rgba(148,190,210,0.055) 1px, transparent 1px); background-size: 46px 46px; mask-image: radial-gradient(ellipse 70% 80% at 70% 20%, black 20%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse 70% 80% at 70% 20%, black 20%, transparent 70%); } .page-hero .container { position: relative; } .crumbs { font-size: 0.8rem; color: var(--mist); margin-bottom: 16px; letter-spacing: 0.04em; } .crumbs a { color: var(--teal-dark); font-weight: 600; } .page-hero p.lede { color: var(--slate); font-size: 1.05rem; max-width: 70ch; margin-top: 14px; } .layout { display: grid; grid-template-columns: 1fr 380px; gap: 40px; align-items: start; } .sticky-side { position: sticky; top: 94px; } .prose h2 { margin: 38px 0 14px; font-size: 1.55rem; } .prose h2:first-child { margin-top: 0; } .prose h3 { margin: 26px 0 10px; } .prose p { color: var(--slate); margin-bottom: 14px; } .prose ul { margin: 0 0 16px 20px; color: var(--slate); } .prose ul li { margin-bottom: 8px; } .prose strong { color: #eaf2f7; } .brand-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 20px 0 8px; } .brand-tile { background: rgba(255, 255, 255, 0.025); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; transition: 0.2s; text-align: left; } .brand-tile:hover { border-color: rgba(20, 201, 184, 0.45); box-shadow: var(--glow-teal); transform: translateY(-2px); } .brand-tile .bt-logo { width: 40px; height: 40px; border-radius: 10px; font-weight: 800; color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-head); margin-bottom: 10px; font-size: 0.85rem; } .brand-tile b { color: #eaf2f7; display: block; font-size: 0.95rem; } .brand-tile span { font-size: 0.78rem; color: var(--mist); } .faq { border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255, 255, 255, 0.02); margin-bottom: 10px; overflow: hidden; transition: 0.2s; } .faq[open] { border-color: rgba(20, 201, 184, 0.3); background: rgba(20, 201, 184, 0.035); } .faq summary { cursor: pointer; padding: 17px 20px; font-weight: 600; color: #eaf2f7; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 14px; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; font-size: 1.3rem; color: var(--teal); font-weight: 400; transition: 0.2s; } .faq[open] summary::after { transform: rotate(45deg); } .faq .faq-a { padding: 0 20px 18px; color: var(--slate); font-size: 0.93rem; } .form-card { background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.02)); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow-md); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .form-card.accent { border-top: 3px solid var(--teal); box-shadow: var(--shadow-md), var(--glow-teal); } .form-card h3 { margin-bottom: 4px; } .form-card .form-sub { font-size: 0.85rem; color: var(--mist); margin-bottom: 18px; } .field { margin-bottom: 14px; } .field label { display: block; font-size: 0.78rem; font-weight: 700; color: #cdd9e3; margin-bottom: 6px; letter-spacing: 0.04em; } .field input, .field select, .field textarea { width: 100%; padding: 11px 14px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 10px; font-family: var(--font-body); font-size: 0.92rem; color: #fff; background: rgba(255, 255, 255, 0.05); transition: 0.18s; outline: none; } .field input::placeholder, .field textarea::placeholder { color: #647a8a; } .field select { color: #e8eff5; } .field select option { background: #0c141e; color: #e8eff5; } .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--teal); background: rgba(20, 201, 184, 0.07); box-shadow: 0 0 0 4px var(--teal-glow); } .field textarea { resize: vertical; min-height: 88px; } .form-actions { display: grid; gap: 10px; margin-top: 18px; } .form-note { font-size: 0.75rem; color: var(--mist); text-align: center; margin-top: 10px; } .form-msg { display: none; padding: 12px 16px; border-radius: 10px; font-size: 0.88rem; font-weight: 600; margin-top: 12px; } .form-msg.ok { display: block; background: rgba(16, 185, 129, 0.12); color: #4ade80; border: 1px solid rgba(16, 185, 129, 0.35); } .form-msg.err { display: block; background: rgba(239, 68, 68, 0.1); color: #fca5a5; border: 1px solid rgba(239, 68, 68, 0.3); } .cta-banner { text-align: center; } .cta-banner .btn-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 26px; } .post-card { display: flex; flex-direction: column; } .post-card .p-cover { height: 170px; border-radius: 13px; margin-bottom: 16px; background: radial-gradient(300px 160px at 80% 0%, rgba(20, 201, 184, 0.2), transparent 60%), linear-gradient(135deg, #0e2131, #081019); border: 1px solid rgba(20, 201, 184, 0.14); display: flex; align-items: center; justify-content: center; font-size: 2.6rem; position: relative; overflow: hidden; } .post-card .p-cover::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(127,230,219,0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(127,230,219,0.07) 1px, transparent 1px); background-size: 22px 22px; } .post-meta { font-size: 0.76rem; color: var(--mist); margin-bottom: 8px; display: flex; gap: 10px; align-items: center; } .post-meta .cat { background: var(--teal-light); color: var(--teal-dark); font-weight: 700; padding: 2px 10px; border-radius: 100px; border: 1px solid rgba(20, 201, 184, 0.2); } .article-body { max-width: 760px; margin: 0 auto; } .article-body .prose { font-size: 1.02rem; } .li-band { background: rgba(255, 255, 255, 0.02); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 36px; } .li-embeds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 22px; } .li-embeds iframe { width: 100%; min-height: 420px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; } footer.site-footer { background: linear-gradient(180deg, var(--bg) 0%, #030609 100%); border-top: 1px solid var(--line-soft); color: #93a8b6; margin-top: 60px; position: relative; } footer.site-footer::before { content: ""; position: absolute; top: 0; left: 10%; right: 10%; height: 1px; background: linear-gradient(90deg, transparent, rgba(20, 201, 184, 0.35), transparent); } .foot-main { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 38px; padding: 56px 0 40px; } .foot-main h4 { color: #fff; font-size: 0.82rem; margin-bottom: 16px; letter-spacing: 0.14em; text-transform: uppercase; } .foot-main ul { list-style: none; } .foot-main li { margin-bottom: 9px; } .foot-main a { color: #93a8b6; font-size: 0.88rem; } .foot-main a:hover { color: var(--teal-dark); } .foot-about p { font-size: 0.88rem; margin: 14px 0 18px; } .socials { display: flex; gap: 9px; } .socials a { width: 36px; height: 36px; border-radius: 9px; background: rgba(255,255,255,0.05); display: flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 700; color: #cfe3e0; border: 1px solid var(--line); transition: 0.2s; } .socials a:hover { background: var(--teal); color: #04211d; transform: translateY(-2px); border-color: var(--teal); } .foot-contact li { display: flex; gap: 10px; font-size: 0.88rem; align-items: flex-start; } .foot-keywords { border-top: 1px solid var(--line-soft); padding: 22px 0; font-size: 0.72rem; color: #4c6272; line-height: 2; } .foot-keywords a { color: #5d7889; } .foot-keywords a:hover { color: var(--teal-dark); } .foot-bottom { border-top: 1px solid var(--line-soft); padding: 18px 0; font-size: 0.8rem; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .foot-bottom a { color: #93a8b6; } .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.65s ease, transform 0.65s ease; } .reveal.visible { opacity: 1; transform: none; } .grid > .reveal:nth-child(2) { transition-delay: 0.07s; } .grid > .reveal:nth-child(3) { transition-delay: 0.14s; } .grid > .reveal:nth-child(4) { transition-delay: 0.07s; } .grid > .reveal:nth-child(5) { transition-delay: 0.14s; } .grid > .reveal:nth-child(6) { transition-delay: 0.21s; } .scroll-progress { position: fixed; top: 0; left: 0; height: 2px; width: 0; z-index: 2000; background: linear-gradient(90deg, var(--teal), var(--blue), var(--violet)); box-shadow: 0 0 12px rgba(20, 201, 184, 0.6); } .tbl { width: 100%; border-collapse: collapse; font-size: 0.9rem; margin: 16px 0; background: rgba(255, 255, 255, 0.02); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--line); } .tbl th { background: rgba(20, 201, 184, 0.1); color: #eaf2f7; text-align: left; padding: 12px 16px; font-family: var(--font-head); font-size: 0.85rem; border-bottom: 1px solid rgba(20, 201, 184, 0.25); } .tbl td { padding: 11px 16px; border-bottom: 1px solid var(--line-soft); color: var(--slate); } .tbl tr:last-child td { border-bottom: none; } .steps { counter-reset: step; display: grid; gap: 14px; margin: 18px 0; } .step { display: flex; gap: 16px; background: rgba(255, 255, 255, 0.02); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; transition: 0.2s; } .step:hover { border-color: rgba(20, 201, 184, 0.3); } .step::before { counter-increment: step; content: "0" counter(step); flex: 0 0 42px; height: 42px; border-radius: 12px; background: var(--teal-light); color: var(--teal-dark); border: 1px solid rgba(20, 201, 184, 0.25); display: flex; align-items: center; justify-content: center; font-weight: 800; font-family: var(--font-head); font-size: 0.9rem; } .step b { color: #eaf2f7; display: block; margin-bottom: 2px; } .step p { font-size: 0.88rem; color: var(--slate); } @media (max-width: 1020px) { .hero .container { grid-template-columns: 1fr; } .hero-visual { max-width: 520px; } .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2, 1fr); } .layout { grid-template-columns: 1fr; } .sticky-side { position: static; } .city-grid { grid-template-columns: repeat(3, 1fr); } .foot-main { grid-template-columns: 1fr 1fr; } .li-embeds { grid-template-columns: 1fr; } } @media (max-width: 760px) { section { padding: 54px 0; } .nav-links { position: fixed; inset: 72px 0 auto 0; background: rgba(6, 10, 16, 0.98); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); flex-direction: column; align-items: stretch; padding: 18px; gap: 2px; border-bottom: 1px solid var(--line); box-shadow: var(--shadow-lg); display: none; max-height: calc(100vh - 72px); overflow-y: auto; } .nav-links.open { display: flex; } .dropdown { position: static; transform: none; opacity: 1; visibility: visible; min-width: 0; grid-template-columns: 1fr; box-shadow: none; border: none; background: transparent; padding: 0 0 0 14px; display: none; } li.has-drop.open .dropdown { display: grid; } .nav-toggle { display: block; } .nav-cta .btn-ghost { display: none; } .grid-3, .grid-2, .grid-4 { grid-template-columns: 1fr; } .city-grid { grid-template-columns: repeat(2, 1fr); } .brand-grid { grid-template-columns: repeat(2, 1fr); } .foot-main { grid-template-columns: 1fr; } .band-dark { padding: 36px 24px; } .topbar .tb-loc { display: none; } } .mob-cta { display: none; } @media (max-width: 760px) { .mob-cta { position: fixed; bottom: 0; left: 0; right: 0; z-index: 998; display: grid; grid-template-columns: 1fr 1fr 1fr; background: rgba(6, 10, 16, 0.97); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: 1px solid var(--line); box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.5); } .mob-cta a { padding: 13px 6px; text-align: center; font-weight: 700; font-size: 0.85rem; display: flex; align-items: center; justify-content: center; gap: 6px; } .mob-cta .mc-call { color: #eaf2f7; } .mob-cta .mc-wa { background: #22c55e; color: #052e12; } .mob-cta .mc-quote { background: var(--teal); color: #04211d; } body { padding-bottom: 50px; } } .res-card { display: flex; gap: 18px; align-items: flex-start; } .res-card .r-ic { flex: 0 0 64px; height: 80px; border-radius: 8px; background: linear-gradient(160deg, #0e2131, #081019); border: 1px solid rgba(20, 201, 184, 0.2); display: flex; align-items: center; justify-content: center; font-size: 1.8rem; border-left: 4px solid var(--teal); box-shadow: var(--shadow-sm); } .gate-hidden { display: none; } .dl-ready { background: rgba(16, 185, 129, 0.08); border: 1px solid rgba(16, 185, 129, 0.3); border-radius: var(--radius); padding: 18px; } .dl-ready a.btn { margin: 6px 8px 0 0; } .quiz-card { background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015)); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 30px; box-shadow: var(--shadow-md); } .q-progress { height: 8px; background: rgba(255, 255, 255, 0.06); border-radius: 100px; overflow: hidden; margin-bottom: 22px; border: 1px solid var(--line); } .q-progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--teal), var(--blue)); width: 0; transition: 0.4s; } .q-question h3 { font-size: 1.25rem; margin-bottom: 18px; } .q-opts { display: grid; gap: 10px; } .q-opt { text-align: left; padding: 14px 18px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, 0.03); font-family: var(--font-body); font-size: 0.95rem; font-weight: 600; color: var(--ink); cursor: pointer; transition: 0.15s; } .q-opt:hover { border-color: var(--teal); background: var(--teal-light); } .q-num { font-size: 0.78rem; font-weight: 700; color: var(--teal-dark); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 8px; } .score-ring { width: 150px; height: 150px; border-radius: 50%; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; flex-direction: column; font-family: var(--font-head); } .score-ring b { font-size: 2.4rem; line-height: 1; } .score-ring span { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.8; } .q-result-item { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); font-size: 0.9rem; } .q-result-item:last-child { border-bottom: none; } .lp-header { background: rgba(5, 9, 15, 0.9); border-bottom: 1px solid var(--line-soft); padding: 14px 0; } .lp-header .container { display: flex; justify-content: space-between; align-items: center; } .lp-hero { background: radial-gradient(820px 420px at 80% -10%, rgba(20, 201, 184, 0.13), transparent 60%), linear-gradient(180deg, #060b12, var(--bg)); padding: 60px 0; border-bottom: 1px solid var(--line-soft); } .lp-hero .container { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 44px; align-items: start; } .lp-points { list-style: none; margin: 22px 0; display: grid; gap: 12px; } .lp-points li { display: flex; gap: 10px; font-size: 1rem; color: var(--ink); font-weight: 500; } .lp-points li::before { content: "✓"; color: var(--teal); font-weight: 800; } .lp-badges { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; } .lp-badges .chip { background: rgba(255, 255, 255, 0.04); } @media (max-width: 900px) { .lp-hero .container { grid-template-columns: 1fr; } } .foot-newsletter { border-bottom: 1px solid var(--line-soft); padding: 30px 0 26px; display: flex; align-items: center; justify-content: space-between; gap: 26px; flex-wrap: wrap; } .foot-newsletter .nl-copy { max-width: 480px; } .foot-newsletter .nl-copy h4 { color: #fff; font-family: var(--font-head); font-size: 1.12rem; margin: 0 0 6px; } .foot-newsletter .nl-copy p { font-size: 0.86rem; color: #93a8b6; margin: 0; } .newsletter-form { display: flex; flex-direction: column; gap: 8px; min-width: 320px; flex: 1 1 340px; max-width: 460px; } .newsletter-form .nl-row { display: flex; gap: 10px; flex-wrap: wrap; } .newsletter-form input[type=email] { flex: 1 1 200px; min-width: 180px; padding: 13px 16px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.05); color: #fff; font-size: 0.92rem; font-family: var(--font-body); transition: 0.2s; } .newsletter-form input[type=email]::placeholder { color: #647a8a; } .newsletter-form input[type=email]:focus { outline: none; border-color: var(--teal); background: rgba(20, 201, 184, 0.07); box-shadow: 0 0 0 3px var(--teal-glow); } .newsletter-form button { padding: 13px 24px; border: none; border-radius: 12px; cursor: pointer; background: linear-gradient(135deg, #17d6c4, var(--teal-deep)); color: #04211d; font-weight: 700; font-size: 0.92rem; font-family: var(--font-head); white-space: nowrap; transition: 0.2s; } .newsletter-form button:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(20, 201, 184, 0.35); } .newsletter-form button:disabled { opacity: 0.6; cursor: default; transform: none; } .newsletter-form .nl-note { font-size: 0.74rem; color: #647a8a; margin: 0; } .newsletter-form .newsletter-msg { font-size: 0.82rem; margin: 2px 0 0; min-height: 0; } .newsletter-form .newsletter-msg.ok { color: #4ade80; } .newsletter-form .newsletter-msg.err { color: #fca5a5; } .newsletter-section { background: radial-gradient(600px 300px at 85% -20%, rgba(20, 201, 184, 0.14), transparent 60%), linear-gradient(135deg, #0e2131 0%, #081019 100%); border: 1px solid rgba(20, 201, 184, 0.18); border-radius: var(--radius-lg); padding: 40px 38px; margin: 40px 0; display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; box-shadow: var(--shadow-md); } .newsletter-section .nl-copy { max-width: 520px; } .newsletter-section .nl-copy h3 { color: #fff; font-family: var(--font-head); font-size: 1.5rem; margin: 0 0 8px; } .newsletter-section .nl-copy p { color: #a9bfca; font-size: 0.95rem; margin: 0; } .newsletter-section .nl-copy .nl-badge { display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--teal-dark); background: var(--teal-glow); padding: 4px 12px; border-radius: 20px; margin-bottom: 12px; } @media (max-width: 720px) { .foot-newsletter, .newsletter-section { flex-direction: column; align-items: stretch; } .newsletter-form { max-width: none; min-width: 0; } .newsletter-section { padding: 30px 22px; } } @media (max-width: 1024px) { html, body { overflow-x: hidden; } .nav-toggle { display: block; } .nav-links { position: fixed; inset: 72px 0 auto 0; background: rgba(6, 10, 16, 0.98); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); flex-direction: column; align-items: stretch; padding: 18px; gap: 2px; border-bottom: 1px solid var(--line); box-shadow: var(--shadow-lg); display: none; max-height: calc(100vh - 72px); overflow-y: auto; } .nav-links.open { display: flex; } .dropdown { position: static; transform: none; opacity: 1; visibility: visible; min-width: 0; grid-template-columns: 1fr; box-shadow: none; border: none; background: transparent; padding: 0 0 0 14px; display: none; } li.has-drop.open .dropdown { display: grid; } .nav-cta .btn-ghost { display: none; } } @media (max-width: 760px) { .tbl, .prose table, article table, .layout table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .foot-keywords { font-size: 0.7rem; line-height: 1.9; } pre, code { white-space: pre-wrap; word-break: break-word; } } h1, h2, h3, h4, p, li, .lede, .eyebrow, blockquote, td, th, a { overflow-wrap: break-word; word-wrap: break-word; } .hero .container > *, .layout > *, .foot-main > *, .hero-trust, .grid > *, [class*="grid-"] > *, .brand-grid > *, .form-card, aside { min-width: 0; } .hero-visual, .hv-card, .hv-anim, .hv-emblem, .review-card, .form-card { max-width: 100%; } @media (max-width: 760px) { .hero h1 { font-size: clamp(1.7rem, 7.5vw, 2.3rem); line-height: 1.18; } h1 { font-size: clamp(1.6rem, 7vw, 2.2rem); } .hero .container, .page-hero .container, .lp-hero .container { max-width: 100%; } .hero-trust { gap: 16px 24px; } .hero-ctas, .form-actions, .btn-row { flex-wrap: wrap; } .hero-ctas .btn, .form-actions .btn { width: 100%; } } iframe, embed, object, video { max-width: 100% !important; } .li-embeds iframe, .li-embeds > * { max-width: 100%; width: 100%; } a.brand-tile{text-decoration:none;color:inherit;cursor:pointer;transition:.15s} a.brand-tile:hover{border-color:var(--teal);transform:translateY(-2px)} :root { --s-deep: #02040a; --s-void: #05090f; --s-raised: #0b1320; --s-high: #111d2e; --a-teal: #14c9b8; --a-blue: #38bdf8; --a-violet: #8b5cf6; --a-amber: #fbbf24; --a-rose: #fb7185; --accent: #14c9b8; --accent-ink: #3ce4d3; --accent-soft: rgba(20, 201, 184, 0.10); --accent-line: rgba(20, 201, 184, 0.30); --accent-glow: rgba(20, 201, 184, 0.20); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-sp: cubic-bezier(0.34, 1.56, 0.64, 1); } [data-sec="infra"], #products, #chainguard { --accent: var(--a-blue); --accent-ink: #7dd3fc; --accent-soft: rgba(56,189,248,0.10); --accent-line: rgba(56,189,248,0.30); --accent-glow: rgba(56,189,248,0.20); } [data-sec="compliance"], #services { --accent: var(--a-amber); --accent-ink: #fcd34d; --accent-soft: rgba(251,191,36,0.09); --accent-line: rgba(251,191,36,0.28); --accent-glow: rgba(251,191,36,0.18); } [data-sec="ai"] { --accent: var(--a-violet); --accent-ink: #c4b5fd; --accent-soft: rgba(139,92,246,0.11); --accent-line: rgba(139,92,246,0.32); --accent-glow: rgba(139,92,246,0.22); } [data-sec="brand"], [data-sec="security"], #why, #coverage { --accent: var(--a-teal); --accent-ink: #3ce4d3; --accent-soft: rgba(20,201,184,0.10); --accent-line: rgba(20,201,184,0.30); --accent-glow: rgba(20,201,184,0.20); } [data-sec="editorial"] { --accent: var(--a-rose); --accent-ink: #fda4af; --accent-soft: rgba(251,113,133,0.09); --accent-line: rgba(251,113,133,0.28); --accent-glow: rgba(251,113,133,0.18); } body::before { content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: 0.028; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); } section { isolation: isolate; } section[style*="background:#fff"], section[style*="background:var(--bg2)"], .band-raised { background: radial-gradient(900px 420px at 85% -30%, var(--accent-soft), transparent 62%), linear-gradient(180deg, var(--s-raised) 0%, #08101b 100%) !important; border-top: 1px solid rgba(255,255,255,0.07) !important; border-bottom: 1px solid rgba(0,0,0,0.5) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); } section[style*="background:#fff"]::before, section[style*="background:var(--bg2)"]::before, .band-raised::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--accent-line) 22%, var(--accent-line) 78%, transparent); opacity: 0.9; } section:nth-of-type(even) { background-image: radial-gradient(1000px 460px at 12% 0%, rgba(255,255,255,0.016), transparent 60%); } .hero { padding: 104px 0 92px; background: radial-gradient(1100px 620px at 76% -14%, rgba(20,201,184,0.17), transparent 60%), radial-gradient(860px 520px at 6% 112%, rgba(139,92,246,0.15), transparent 58%), radial-gradient(700px 460px at 104% 78%, rgba(56,189,248,0.10), transparent 56%), linear-gradient(180deg, #070d16 0%, var(--s-void) 62%, #070d16 100%); } .hero .container { grid-template-columns: 1.06fr 0.94fr; gap: 60px; } .hero-grid3d { position: absolute; left: -20%; right: -20%; bottom: -10%; height: 62%; perspective: 320px; perspective-origin: 50% 0%; pointer-events: none; overflow: hidden; z-index: 0; } .hero-grid3d { transform-style: preserve-3d; mask-image: linear-gradient(to top, #000 0%, transparent 78%); -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 78%); } .hero-grid3d i { position: absolute; left: 0; right: 0; top: 0; height: 200%; transform: rotateX(74deg) translate3d(0, 0, 0); transform-origin: 50% 0%; background-image: linear-gradient(rgba(20,201,184,0.22) 1px, transparent 1px), linear-gradient(90deg, rgba(20,201,184,0.16) 1px, transparent 1px); background-size: 64px 64px; will-change: transform; animation: gridFlow 9s linear infinite; } @keyframes gridFlow { from { transform: rotateX(74deg) translate3d(0, 0, 0); } to { transform: rotateX(74deg) translate3d(0, 64px, 0); } } .hero-fx .scan { top: 0; left: 0; right: 0; height: 34%; background: linear-gradient(180deg, transparent, rgba(127,230,219,0.055) 48%, transparent); animation: scanDown 8.5s cubic-bezier(0.45,0,0.55,1) infinite; } @keyframes scanDown { 0% { transform: translateY(-120%); opacity: 0; } 12% { opacity: 1; } 78% { opacity: 1; } 100% { transform: translateY(420%); opacity: 0; } } .hero h1 { font-size: clamp(2.35rem, 5.2vw, 4rem); line-height: 1.06; letter-spacing: -0.032em; font-weight: 700; } .hero h1 .grad { background: linear-gradient(100deg, var(--a-teal) 0%, var(--a-blue) 34%, var(--a-violet) 62%, var(--a-teal) 100%); background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: sheen 9s ease-in-out infinite; } @keyframes sheen { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .hero h1 .w { display: inline-block; } .hero h1.lit .w { animation: wordIn 0.52s var(--ease-out) both; animation-delay: calc(min(var(--i, 0), 8) * 30ms); } @keyframes wordIn { from { opacity: 0; transform: translateY(0.5em) rotateX(-40deg); } to { opacity: 1; transform: none; } } .hero p.lede { font-size: 1.14rem; max-width: 56ch; color: #b3c4d2; } .hero-ctas .btn-primary { position: relative; isolation: isolate; overflow: hidden; } .hero-ctas .btn-primary::before { content: ""; position: absolute; inset: -140%; z-index: -1; background: conic-gradient(from 0deg, transparent 0 62%, rgba(255,255,255,0.85) 74%, transparent 86% 100%); animation: ctaSpin 4.5s linear infinite; opacity: 0.5; } .hero-ctas .btn-primary::after { content: ""; position: absolute; inset: 1.5px; z-index: -1; border-radius: 10.5px; background: linear-gradient(135deg, #17d6c4, var(--teal-deep)); } @keyframes ctaSpin { to { transform: rotate(360deg); } } .hero-trust { margin-top: 44px; padding: 18px 4px 0; border-top: 1px solid rgba(255,255,255,0.09); gap: 34px; } .ht-item strong { font-size: 1.75rem; letter-spacing: -0.02em; } .ht-item { position: relative; } .ht-item + .ht-item::before { content: ""; position: absolute; left: -17px; top: 8px; bottom: 8px; width: 1px; background: linear-gradient(180deg, transparent, rgba(255,255,255,0.14), transparent); } .hv-stage { position: relative; width: 100%; aspect-ratio: 1 / 1; min-height: 400px; border-radius: 26px; border: 1px solid rgba(20,201,184,0.22); background: radial-gradient(460px 340px at 68% 22%, rgba(20,201,184,0.14), transparent 62%), radial-gradient(400px 320px at 22% 84%, rgba(139,92,246,0.14), transparent 62%), linear-gradient(165deg, #0b1624 0%, #04080e 100%); box-shadow: 0 32px 90px rgba(0,0,0,0.6), 0 0 60px rgba(20,201,184,0.10), inset 0 1px 0 rgba(255,255,255,0.06); overflow: hidden; } .hv-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .hv-stage .corner { position: absolute; width: 26px; height: 26px; pointer-events: none; border: 2px solid var(--a-teal); opacity: 0.55; border-radius: 2px; } .hv-stage .corner.tl { top: 14px; left: 14px; border-right: 0; border-bottom: 0; } .hv-stage .corner.tr { top: 14px; right: 14px; border-left: 0; border-bottom: 0; } .hv-stage .corner.bl { bottom: 14px; left: 14px; border-right: 0; border-top: 0; } .hv-stage .corner.br { bottom: 14px; right: 14px; border-left: 0; border-top: 0; } .hv-core { position: absolute; top: 50%; left: 50%; width: 30%; max-width: 152px; transform: translate(-50%, -50%); z-index: 3; pointer-events: none; } .hv-core svg { width: 100%; height: auto; filter: drop-shadow(0 0 22px rgba(20,201,184,0.45)); } .hv-core::after { content: ""; position: absolute; left: 50%; top: 50%; width: 190%; height: 190%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(20,201,184,0.20), transparent 62%); animation: corePulse 3.4s ease-in-out infinite; } @keyframes corePulse { 0%,100% { transform: translate(-50%,-50%) scale(0.9); opacity: 0.75; } 50% { transform: translate(-50%,-50%) scale(1.12); opacity: 0.35; } } .hv-layers { position: absolute; left: 16px; bottom: 16px; right: 16px; z-index: 4; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin: 0; padding: 0; } .hv-layers li { display: flex; align-items: center; gap: 8px; background: rgba(5,11,18,0.68); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.09); border-radius: 10px; padding: 8px 11px; font-size: 0.76rem; font-weight: 600; color: #cfe0ea; letter-spacing: 0.01em; } .hv-layers li .lv-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--a-teal); flex: 0 0 7px; box-shadow: 0 0 0 0 rgba(20,201,184,0.55); animation: lvPing 3.2s ease-out infinite; animation-delay: calc(var(--i, 0) * 0.8s); } @keyframes lvPing { 0% { box-shadow: 0 0 0 0 rgba(20,201,184,0.55); } 45%,100%{ box-shadow: 0 0 0 9px rgba(20,201,184,0); } } .hv-layers li:nth-child(2) .lv-dot { background: var(--a-blue); } .hv-layers li:nth-child(3) .lv-dot { background: var(--a-violet); } .hv-layers li:nth-child(4) .lv-dot { background: var(--a-amber); } .hv-stage .hv-anim-badge { bottom: auto; top: 16px; } @media (max-width: 1020px) { .hero .container { grid-template-columns: 1fr; } .hv-stage { aspect-ratio: 1.15 / 1; min-height: 340px; } .hero-grid3d { display: none; } } @media (max-width: 760px) { .hero { padding: 64px 0 68px; } .hv-layers { grid-template-columns: 1fr; } .hv-layers li:nth-child(n+3) { display: none; } .hero-trust { gap: 22px; } .ht-item + .ht-item::before { display: none; } } @media (prefers-reduced-motion: reduce) { .hero-grid3d i, .hero-fx .scan, .hero h1 .grad, .hv-core::after, .hv-layers li .lv-dot, .hero-ctas .btn-primary::before { animation: none; } .hero h1 .w, .hero h1.lit .w { opacity: 1; transform: none; animation: none; } } .card, .review-card, .brand-tile, .city, .step, .form-card, .quiz-card, .res-card { --mx: 50%; --my: 50%; } .card { background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.012)); border-color: rgba(255,255,255,0.09); transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out), border-color 0.3s ease; } .card::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; border-radius: inherit; opacity: 0; transition: opacity 0.35s ease; background: radial-gradient(340px circle at var(--mx) var(--my), var(--accent-soft), transparent 65%); } .card:hover::after { opacity: 1; } .card > * { position: relative; z-index: 1; } .card::before { background: linear-gradient(90deg, transparent, var(--accent-line), transparent); } .card:hover { transform: translateY(-6px); border-color: var(--accent-line); box-shadow: 0 22px 54px rgba(0,0,0,0.5), 0 0 44px var(--accent-glow); } .card .c-ic { background: var(--accent-soft); border-color: var(--accent-line); transition: transform 0.4s var(--ease-sp), box-shadow 0.35s ease; } .card:hover .c-ic { transform: translateY(-2px) scale(1.07) rotate(-3deg); box-shadow: 0 0 26px var(--accent-glow); } .card .c-link { color: var(--accent-ink); } .card .c-link { display: inline-block; transition: transform 0.3s var(--ease-out), color 0.2s ease; } .card:hover .c-link { transform: translateX(4px); } .sec-head .kicker { color: var(--accent-ink); border-color: var(--accent-line); background: var(--accent-soft); } .feat .f-ic { background: var(--accent-soft); border-color: var(--accent-line); } .post-meta .cat { background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent-line); } .step::before { background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent-line); } .sec-head h2 { position: relative; padding-bottom: 16px; } .sec-head h2::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 62px; height: 2px; transform: translateX(-50%); border-radius: 2px; background: linear-gradient(90deg, transparent, var(--accent), transparent); } .reveal { opacity: 1; transform: none; } .rv .reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); transition-delay: calc(var(--i, 0) * 65ms); } .rv .reveal.visible { opacity: 1; transform: none; } @media print { .rv .reveal { opacity: 1 !important; transform: none !important; } } .rv .grid > .reveal:nth-child(n) { transition-delay: calc(var(--i, 0) * 65ms); } .rv .reveal[data-rv="left"] { transform: translateX(-30px); } .rv .reveal[data-rv="right"] { transform: translateX(30px); } .rv .reveal[data-rv="scale"] { transform: scale(0.95) translateY(18px); } .rv .reveal[data-rv="left"].visible, .rv .reveal[data-rv="right"].visible, .rv .reveal[data-rv="scale"].visible { transform: none; } .band-dark { background: radial-gradient(740px 420px at 88% -12%, var(--accent-soft), transparent 56%), radial-gradient(540px 340px at 2% 112%, rgba(139,92,246,0.13), transparent 56%), linear-gradient(165deg, var(--s-high), #070e17); border-color: var(--accent-line); box-shadow: 0 24px 64px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.05); } .band-dark::before { content: ""; position: absolute; top: 0; left: 8%; right: 8%; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: 0.6; } .faq[open] { border-color: var(--accent-line); background: var(--accent-soft); } .faq summary::after { color: var(--accent); } .faq summary:hover { color: var(--accent-ink); } .faq .faq-a { animation: faqIn 0.35s var(--ease-out); } @keyframes faqIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } .tbl th { background: var(--accent-soft); border-bottom-color: var(--accent-line); } .tbl tbody tr { transition: background 0.2s ease; } .tbl tbody tr:hover { background: rgba(255,255,255,0.03); } .city:hover { border-color: var(--accent-line); box-shadow: 0 0 26px var(--accent-glow); } .city span { color: var(--accent-ink); } .chip:hover { border-color: var(--accent-line); } .chip b { color: var(--accent-ink); } footer.site-footer { background: linear-gradient(180deg, var(--s-void) 0%, var(--s-deep) 100%); } .socials a:hover { background: var(--accent); border-color: var(--accent); } .foot-main a:hover { color: var(--accent-ink); } .page-hero { padding: 76px 0 64px; background: radial-gradient(820px 420px at 86% -24%, var(--accent-soft), transparent 60%), radial-gradient(600px 340px at -4% 124%, rgba(139,92,246,0.10), transparent 56%), linear-gradient(180deg, #070d16, var(--s-void)); } .page-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--accent-line), transparent); } .page-hero h1 { font-size: clamp(2rem, 4.2vw, 3.1rem); } .crumbs a { color: var(--accent-ink); } .btn-ghost:hover { border-color: var(--accent); color: var(--accent-ink) !important; background: var(--accent-soft); } .scroll-progress { background: linear-gradient(90deg, var(--accent), var(--a-blue), var(--a-violet)); } a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; } @media (prefers-reduced-motion: reduce) { .rv .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } .card:hover { transform: none; } .faq .faq-a { animation: none; } } @media (max-width: 760px) { .hero { padding: 40px 0 52px; } .hero .container { gap: 30px; } .hero h1 { font-size: clamp(1.75rem, 8.2vw, 2.3rem); line-height: 1.14; letter-spacing: -0.025em; } .hero p.lede { font-size: 0.97rem; line-height: 1.58; margin: 14px 0 22px; } .eyebrow { font-size: 0.64rem; padding: 6px 12px; margin-bottom: 16px; letter-spacing: 0.08em; line-height: 1.45; } .hero-ctas { gap: 10px; } .hero-trust { margin-top: 26px; padding-top: 14px; gap: 18px 26px; } .ht-item strong { font-size: 1.4rem; } .ht-item span { font-size: 0.7rem; } .hv-stage { min-height: 280px; aspect-ratio: 1.25 / 1; border-radius: 20px; } .hv-stage .corner { width: 18px; height: 18px; } .sec-head { margin-bottom: 34px; } .sec-head h2::after { width: 48px; } } .hv-stage.no-canvas::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-radial-gradient(circle at 50% 50%, transparent 0 43px, rgba(20, 201, 184, 0.15) 43px 44px, transparent 44px 46px), conic-gradient(from 210deg at 50% 50%, rgba(20, 201, 184, 0.16), transparent 22%, transparent 100%); mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 74%); -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 74%); } .eyebrow .dot, .hv-anim-badge .dot, .hv-layers li .lv-dot { position: relative; animation: none; box-shadow: none; } .eyebrow .dot::after, .hv-anim-badge .dot::after, .hv-layers li .lv-dot::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid currentColor; color: var(--teal); opacity: 0; animation: ringPing 2.4s cubic-bezier(0, 0, 0.2, 1) infinite; animation-delay: calc(var(--i, 0) * 0.6s); will-change: transform, opacity; } .hv-layers li:nth-child(2) .lv-dot::after { color: var(--a-blue); } .hv-layers li:nth-child(3) .lv-dot::after { color: var(--a-violet); } .hv-layers li:nth-child(4) .lv-dot::after { color: var(--a-amber); } @keyframes ringPing { 0% { transform: scale(0.7); opacity: 0.85; } 70%, 100% { transform: scale(2.6); opacity: 0; } } .hero h1 .grad { background-size: 100% 100%; animation: none; } @media (prefers-reduced-motion: reduce) { .eyebrow .dot::after, .hv-anim-badge .dot::after, .hv-layers li .lv-dot::after { animation: none; opacity: 0; } } .team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin: 22px 0 8px; } .tm-card { display: flex; gap: 16px; align-items: center; background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.012)); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px; transition: transform 0.3s var(--ease-out), border-color 0.25s ease, box-shadow 0.3s ease; } .tm-card:hover { transform: translateY(-3px); border-color: var(--accent-line); box-shadow: 0 18px 44px rgba(0,0,0,0.45), 0 0 34px var(--accent-glow); } .tm-photo { position: relative; flex: 0 0 82px; width: 82px; height: 82px; border-radius: 50%; overflow: hidden; border: 2px solid var(--accent-line); box-shadow: 0 0 0 4px rgba(255,255,255,0.03); } .tm-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .tm-initials { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-head); font-weight: 700; font-size: 1.7rem; color: #06121c; background: linear-gradient(135deg, var(--teal), var(--violet)); letter-spacing: -0.02em; } .tm-body { min-width: 0; } .tm-body b { display: block; color: #eaf2f7; font-family: var(--font-head); font-size: 1.05rem; letter-spacing: -0.01em; } .tm-role { display: inline-block; margin: 5px 0 8px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-ink); background: var(--accent-soft); border: 1px solid var(--accent-line); padding: 3px 10px; border-radius: 100px; } .tm-body p { font-size: 0.85rem; color: var(--slate); margin: 0 0 8px; } .tm-li { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; font-weight: 600; color: var(--accent-ink); } .tm-li:hover { color: #7ff2e6; } .tm-li svg { width: 14px; height: 14px; fill: currentColor; flex: 0 0 14px; } @media (max-width: 420px) { .tm-card { flex-direction: column; text-align: center; align-items: center; } .tm-photo { flex-basis: 96px; width: 96px; height: 96px; } } .ico { display: inline-flex; align-items: center; justify-content: center; font-size: 0 !important; } .ico::before { content: ""; display: block; flex: none; width: var(--ico-size, 22px); height: var(--ico-size, 22px); background-color: currentColor; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; } .c-ic.ico { --ico-size: 24px; color: var(--accent); } .d-ic.ico { --ico-size: 18px; color: var(--accent-ink); opacity: 0.92; } .f-ic.ico { --ico-size: 21px; color: var(--accent); } .r-ic.ico { --ico-size: 26px; color: var(--accent); } .card:hover .c-ic.ico { color: var(--accent-ink); } .ico-shield{--ico:url("data:image/svg+xml,<svg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3.2 19 6v5.2c0 4.4-2.9 7.9-7 9.6-4.1-1.7-7-5.2-7-9.6V6z'/></svg>")} .ico-shield-check{--ico:url("data:image/svg+xml,<svg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3.2 19 6v5.2c0 4.4-2.9 7.9-7 9.6-4.1-1.7-7-5.2-7-9.6V6z'/><path d='M9 12l2.2 2.2L15.2 10'/></svg>")} .ico-cloud{--ico:url("data:image/svg+xml,<svg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M7.2 18.5h9.3a3.6 3.6 0 0 0 .4-7.2 5.6 5.6 0 0 0-10.6-1.4 4.3 4.3 0 0 0 .9 8.6z'/></svg>")} .ico-cpu{--ico:url("data:image/svg+xml,<svg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M9 2.5v2.2M15 2.5v2.2M9 19.3v2.2M15 19.3v2.2M2.5 9h2.2M2.5 15h2.2M19.3 9h2.2M19.3 15h2.2'/><path d='M5.5 5.5h13v13h-13z'/><path d='M9.5 9.5h5v5h-5z'/></svg>")} .ico-box{--ico:url("data:image/svg+xml,<svg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2.8 20.4 7v10L12 21.2 3.6 17V7z'/><path d='M3.6 7 12 11.2 20.4 7M12 11.2v10'/></svg>")} .ico-refresh{--ico:url("data:image/svg+xml,<svg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M20.5 12a8.5 8.5 0 1 1-2.5-6M20.5 3.5v6h-6'/></svg>")} .ico-mail{--ico:url("data:image/svg+xml,<svg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M3.2 5.5h17.6v13H3.2z'/><path d='M3.6 6.3 12 12.5l8.4-6.2'/></svg>")} .ico-mail-send{--ico:url("data:image/svg+xml,<svg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M3.2 5.5h17.6v13H3.2z'/><path d='M3.6 6.3 12 12.5l8.4-6.2'/><path d='M15.5 21l2.5-2.5L15.5 16'/></svg>")} .ico-monitor{--ico:url("data:image/svg+xml,<svg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M3.2 4.5h17.6v11.5H3.2z'/><path d='M8.5 20h7M12 16v4'/></svg>")} .ico-search{--ico:url("data:image/svg+xml,<svg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M11 4a7 7 0 1 1 0 14 7 7 0 0 1 0-14z'/><path d='M16.2 16.2 20.5 20.5'/></svg>")} .ico-award{--ico:url("data:image/svg+xml,<svg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3.5a5 5 0 1 1 0 10 5 5 0 0 1 0-10z'/><path d='M8.6 12.6 7.2 20.5 12 18l4.8 2.5-1.4-7.9'/></svg>")} .ico-lock{--ico:url("data:image/svg+xml,<svg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M4.8 10.8h14.4v9.7H4.8z'/><path d='M8.2 10.8V7.4a3.8 3.8 0 0 1 7.6 0v3.4'/></svg>")} .ico-lock-key{--ico:url("data:image/svg+xml,<svg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M4.8 10.8h14.4v9.7H4.8z'/><path d='M8.2 10.8V7.4a3.8 3.8 0 0 1 7.6 0v3.4'/><path d='M12 14.4v3'/></svg>")} .ico-clipboard{--ico:url("data:image/svg+xml,<svg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M8.8 4.2H6.4v16.3h11.2V4.2h-2.4'/><path d='M9.2 2.4h5.6v3.4H9.2z'/><path d='M9.4 13.2l2.1 2.1 4-4'/></svg>")} .ico-globe{--ico:url("data:image/svg+xml,<svg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3a9 9 0 1 1 0 18 9 9 0 0 1 0-18z'/><path d='M3.2 12h17.6'/><path d='M12 3c2.6 2.5 4 5.6 4 9s-1.4 6.5-4 9c-2.6-2.5-4-5.6-4-9s1.4-6.5 4-9z'/></svg>")} .ico-wifi{--ico:url("data:image/svg+xml,<svg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M4.6 11.4a11 11 0 0 1 14.8 0M7.8 14.9a6.4 6.4 0 0 1 8.4 0'/><path d='M12 18.6h.01'/></svg>")} .ico-switch{--ico:url("data:image/svg+xml,<svg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M3.2 7.4h17.6v9.2H3.2z'/><path d='M7 12h.01M11 12h.01M15 12h.01'/></svg>")} .ico-swap{--ico:url("data:image/svg+xml,<svg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M7 3.6 3 7.6l4 4M3.4 7.6h13.8M17 20.4l4-4-4-4M20.6 16.4H6.8'/></svg>")} .ico-database{--ico:url("data:image/svg+xml,<svg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3.2c4.4 0 8 1.3 8 3s-3.6 3-8 3-8-1.3-8-3 3.6-3 8-3z'/><path d='M4 6.2v11.6c0 1.7 3.6 3 8 3s8-1.3 8-3V6.2'/><path d='M4 12c0 1.7 3.6 3 8 3s8-1.3 8-3'/></svg>")} .ico-server{--ico:url("data:image/svg+xml,<svg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M3.4 4.2h17.2v6.2H3.4z'/><path d='M3.4 13.6h17.2v6.2H3.4z'/><path d='M7 7.3h.01M7 16.7h.01'/></svg>")} .ico-compass{--ico:url("data:image/svg+xml,<svg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3a9 9 0 1 1 0 18 9 9 0 0 1 0-18z'/><path d='M15.6 8.4 13.7 13.7 8.4 15.6l1.9-5.3z'/></svg>")} .ico-eye{--ico:url("data:image/svg+xml,<svg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M2.6 12S6.6 5.4 12 5.4 21.4 12 21.4 12 17.4 18.6 12 18.6 2.6 12 2.6 12z'/><path d='M12 9a3 3 0 1 1 0 6 3 3 0 0 1 0-6z'/></svg>")} .ico-factory{--ico:url("data:image/svg+xml,<svg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M3.4 20.6V9.8l5.6 3.6V9.8l5.6 3.6V5.6l5.6 3.7v11.3z'/><path d='M7 17h.01M12 17h.01M17 17h.01'/></svg>")} .ico-video{--ico:url("data:image/svg+xml,<svg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M3.2 6.4h11.2v11.2H3.2z'/><path d='M14.4 10.4 20.8 7v10l-6.4-3.4z'/></svg>")} .ico-wrench{--ico:url("data:image/svg+xml,<svg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M14.6 6.4a4.2 4.2 0 1 0 3 3l-8.3 8.3-3-3z'/></svg>")} .ico-zap{--ico:url("data:image/svg+xml,<svg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M13.4 2.6 3.8 14.2h7.2l-.4 7.2 9.6-11.6h-7.2z'/></svg>")} .ico-cap{--ico:url("data:image/svg+xml,<svg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3.4 2.6 8 12 12.6 21.4 8z'/><path d='M6.2 10.2v5.2c0 1.7 2.6 3 5.8 3s5.8-1.3 5.8-3v-5.2'/></svg>")} .ico-trophy{--ico:url("data:image/svg+xml,<svg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M8.2 3.6h7.6v5.2a3.8 3.8 0 0 1-7.6 0z'/><path d='M8.2 4.6H5.4v1.6a3 3 0 0 0 3 3M15.8 4.6h2.8v1.6a3 3 0 0 1-3 3'/><path d='M12 12.6v4M9.4 20.4h5.2'/></svg>")} .ico-pin{--ico:url("data:image/svg+xml,<svg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M12 21.2s6.8-6 6.8-10.6a6.8 6.8 0 1 0-13.6 0C5.2 15.2 12 21.2 12 21.2z'/><path d='M12 8a2.6 2.6 0 1 1 0 5.2A2.6 2.6 0 0 1 12 8z'/></svg>")} .ico-calendar{--ico:url("data:image/svg+xml,<svg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M3.6 5.6h16.8v15H3.6z'/><path d='M8 2.8v4M16 2.8v4M3.6 10.2h16.8'/></svg>")} .ico-check{--ico:url("data:image/svg+xml,<svg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3a9 9 0 1 1 0 18 9 9 0 0 1 0-18z'/><path d='M8.2 12.2l2.6 2.6 5-5.4'/></svg>")} .ico-receipt{--ico:url("data:image/svg+xml,<svg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M6.2 2.6h11.6v18.8l-2.9-1.9-2.9 1.9-2.9-1.9-2.9 1.9z'/><path d='M9.2 7.4h5.6M9.2 11.4h5.6'/></svg>")} .ico-phone{--ico:url("data:image/svg+xml,<svg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M6.4 3.2h3.1l1.6 4-2.1 1.6a12.4 12.4 0 0 0 5.9 5.9l1.6-2.1 4 1.6v3.1a2 2 0 0 1-2.2 2A16.6 16.6 0 0 1 4.4 5.4a2 2 0 0 1 2-2.2z'/></svg>")} .ico-building{--ico:url("data:image/svg+xml,<svg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M4.4 3.4h15.2v17.2H4.4z'/><path d='M8.4 7.2h.01M15.6 7.2h.01M8.4 11.2h.01M15.6 11.2h.01'/><path d='M10 20.6v-4h4v4'/></svg>")} .ico-scale{--ico:url("data:image/svg+xml,<svg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3.4v17.2M6.4 7.6h11.2'/><path d='M6.4 7.6 3.2 14.4h6.4zM17.6 7.6l3.2 6.8h-6.4z'/><path d='M9 20.6h6'/></svg>")} .ico-card{--ico:url("data:image/svg+xml,<svg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M2.6 5.4h18.8v13.2H2.6z'/><path d='M2.6 10h18.8'/></svg>")} .ico-cross{--ico:url("data:image/svg+xml,<svg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M4.6 4.2h14.8v15.6H4.6z'/><path d='M12 8.8v6.4M8.8 12h6.4'/></svg>")} .ico-kanban{--ico:url("data:image/svg+xml,<svg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M3.6 4.2h16.8v15.6H3.6z'/><path d='M9 8v8M15 8v5'/></svg>")} .ico-chart{--ico:url("data:image/svg+xml,<svg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M4.2 20.4V10.6M10 20.4V4.2M15.8 20.4v-7.2M3.2 20.4h17.6'/></svg>")} .ico-chat{--ico:url("data:image/svg+xml,<svg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M4 4.6h16v11.2H9.6L5.2 19.4v-3.6H4z'/></svg>")} .ico-layers{--ico:url("data:image/svg+xml,<svg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2.8 21 7.6 12 12.4 3 7.6z'/><path d='M3 12.6l9 4.8 9-4.8'/><path d='M3 17l9 4.8 9-4.8'/></svg>")} .ico-users{--ico:url("data:image/svg+xml,<svg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M9 4.6a3.4 3.4 0 1 1 0 6.8 3.4 3.4 0 0 1 0-6.8z'/><path d='M2.8 20.2a6.2 6.2 0 0 1 12.4 0'/><path d='M16.4 5.2a3.4 3.4 0 0 1 0 6.6M17.4 14.6a6.2 6.2 0 0 1 3.8 5.6'/></svg>")} .ico-gear{--ico:url("data:image/svg+xml,<svg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M12 9a3 3 0 1 1 0 6 3 3 0 0 1 0-6z'/><path d='M12 2.6v2.8M12 18.6v2.8M21.4 12h-2.8M5.4 12H2.6M18.6 5.4l-2 2M7.4 16.6l-2 2M18.6 18.6l-2-2M7.4 7.4l-2-2'/></svg>")} .ico-rupee{--ico:url("data:image/svg+xml,<svg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3a9 9 0 1 1 0 18 9 9 0 0 1 0-18z'/><path d='M9 7.6h6M9 10.4h6M13.4 7.6c1.6 0 2.4 1.2 2.4 2.8s-1 2.6-2.8 2.6H9.6l4.4 4.4'/></svg>")} .ico.i-sm { --ico-size: 14px; vertical-align: -2px; margin-right: 7px; } .ico.i-xs { --ico-size: 12px; vertical-align: -1px; margin-right: 5px; } .sec-head .kicker .ico { color: var(--accent-ink); } .topbar .ico, .foot-contact .ico, .form-note .ico { color: var(--accent-ink); opacity: .85; } .hv-row .ico { color: var(--accent); } @media (min-width: 1021px) { .hero { padding: 76px 0 72px; } .hero .container { grid-template-columns: 1.24fr 0.76fr; gap: 48px; } .hero h1 { font-size: clamp(2.1rem, 3.4vw, 2.9rem); line-height: 1.08; } .eyebrow { margin-bottom: 14px; } .hero p.lede { font-size: 1.05rem; margin: 14px 0 22px; max-width: 62ch; } .hero-copy { display: flex; flex-direction: column; } .hero-copy .eyebrow { order: 1; align-self: flex-start; } .hero-copy h1 { order: 2; } .hero-copy p.lede { order: 3; } .hero-copy .hero-trust { order: 4; margin: 4px 0 20px; padding-top: 16px; } .hero-copy .hero-ctas { order: 5; } .hero-copy .hero-fork { order: 6; } .ht-item strong { font-size: 1.45rem; } } .hero-fork { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.07); font-size: 0.82rem; color: var(--mist); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; } .hero-fork > span:first-child { font-family: var(--mono, var(--font-head)); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mist); width: 100%; margin-bottom: 2px; } .hero-fork a { color: #cdd9e3; font-weight: 600; border-bottom: 1px solid var(--accent-line); padding-bottom: 1px; transition: color .2s ease, border-color .2s ease; } .hero-fork a:hover { color: var(--accent-ink); border-color: var(--accent); } .hero-fork .sep { color: rgba(255,255,255,0.22); } @media (max-width: 1020px) { .hero-fork .sep { display: none; } .hero-fork a { width: 100%; } } @media (min-width: 1021px) { .hero-copy .hero-trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 22px; margin: 2px 0 18px; padding-top: 14px; } .hero-copy .hero-trust .ht-item { min-width: 0; } .hero-copy .ht-item strong { font-size: 1.35rem; } .hero-copy .ht-item span { font-size: 0.66rem; line-height: 1.35; display: block; } .hero-copy .ht-item + .ht-item::before { left: -11px; } .hero-copy p.lede { margin: 12px 0 18px; } .hero { padding-bottom: 64px; } } @media (max-width: 1020px) { .hero-copy { display: flex; flex-direction: column; } .hero-copy .eyebrow { order: 1; align-self: flex-start; } .hero-copy h1 { order: 2; } .hero-copy p.lede { order: 3; } .hero-copy .hero-ctas { order: 4; } .hero-copy .hero-trust { order: 5; } .hero-copy .hero-fork { order: 6; } } .hv-stack { position: relative; width: 100%; border-radius: 22px; overflow: hidden; border: 1px solid rgba(255,255,255,0.10); background: radial-gradient(520px 320px at 78% -12%, rgba(20,201,184,0.12), transparent 62%), linear-gradient(168deg, #0d1826 0%, #070d16 62%, #050a12 100%); box-shadow: 0 30px 80px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.07); padding: 20px 20px 16px; } .hs-head { padding: 2px 4px 14px; border-bottom: 1px solid rgba(255,255,255,0.07); } .hs-head b { display: block; font-family: var(--font-head); font-size: 1.02rem; color: #f2f7fa; letter-spacing: -0.01em; } .hs-head span { display: block; margin-top: 4px; font-size: 0.75rem; color: var(--mist); } .hs-layers { list-style: none; margin: 0; padding: 12px 0 0; display: grid; gap: 7px; } .hs-layers li { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border-radius: 12px; background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.07); border-left: 3px solid var(--l); transition: background .25s ease, transform .25s var(--ease-out), border-color .25s ease; animation: hsIn .55s var(--ease-out) both; animation-delay: calc(var(--i) * 70ms + 120ms); } @keyframes hsIn { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } } .hs-layers li:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); border-left-color: var(--l); transform: translateX(3px); } .hs-ic { flex: none; width: 34px; height: 34px; border-radius: 9px; background: color-mix(in srgb, var(--l) 14%, transparent); border: 1px solid color-mix(in srgb, var(--l) 34%, transparent); color: var(--l); --ico-size: 17px; } @supports not (background: color-mix(in srgb, red 10%, transparent)) { .hs-ic { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.14); } } .hs-body { min-width: 0; } .hs-body b { display: block; font-size: 0.87rem; font-weight: 600; color: #eaf2f7; letter-spacing: -0.005em; line-height: 1.3; } .hs-body > span { display: block; margin-top: 2px; font-size: 0.73rem; color: var(--mist); line-height: 1.4; overflow-wrap: break-word; } .hs-foot { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.07); font-size: 0.71rem; color: var(--mist); line-height: 1.4; } .hs-live { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #4ade80; position: relative; } .hs-live::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 1.5px solid #4ade80; opacity: 0; animation: ringPing 2.6s cubic-bezier(0,0,0.2,1) infinite; } @media (max-width: 1020px) { .hv-stack { max-width: 560px; margin: 0 auto; } } @media (max-width: 420px) { .hs-layers li { padding: 10px 11px; gap: 10px; } .hs-ic { width: 30px; height: 30px; --ico-size: 15px; } .hs-body > span { font-size: 0.7rem; } } @media (prefers-reduced-motion: reduce) { .hs-layers li { animation: none; } .hs-live::after { animation: none; } } .iv-greet{position:fixed;right:22px;bottom:140px;z-index:998;width:334px;max-width:calc(100vw - 32px); background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg); box-shadow:var(--shadow-md);overflow:hidden;font-size:14px; opacity:0;transform:translateY(10px) scale(.98);pointer-events:none;transition:opacity .22s ease,transform .22s ease} .iv-greet.open{opacity:1;transform:none;pointer-events:auto} .iv-greet-hd{display:flex;align-items:center;gap:10px;padding:13px 14px;background:var(--navy-soft);border-bottom:1px solid var(--line)} .iv-greet-dot{width:9px;height:9px;border-radius:50%;background:#22c55e;flex:none;box-shadow:0 0 0 3px rgba(34,197,94,.18)} .iv-greet-hd b{font-size:13.5px;font-weight:600;flex:1;min-width:0;color:var(--ink)} .iv-greet-x{background:none;border:0;color:var(--mist);font-size:20px;line-height:1;cursor:pointer;padding:2px 4px;border-radius:6px} .iv-greet-x:hover{color:var(--ink)} .iv-greet-x:focus-visible{outline:2px solid var(--teal);outline-offset:2px} .iv-greet-bd{padding:14px;max-height:66vh;overflow-y:auto} .iv-greet-msg{color:var(--slate);line-height:1.5;margin:0 0 12px} .iv-greet-msg b{color:var(--ink)} .iv-chips{display:flex;flex-wrap:wrap;gap:7px} .iv-chip{background:var(--panel);border:1px solid var(--line);color:var(--slate);border-radius:999px; padding:7px 12px;font:inherit;font-size:12.8px;cursor:pointer;transition:.15s} .iv-chip:hover{border-color:var(--teal);color:var(--teal)} .iv-chip:focus-visible{outline:2px solid var(--teal);outline-offset:2px} .iv-greet-bd label{display:block;font-size:12px;color:var(--mist);margin:10px 0 4px} .iv-greet-bd input,.iv-greet-bd textarea{width:100%;background:var(--panel);border:1px solid var(--line); color:var(--ink);border-radius:10px;padding:9px 11px;font:inherit;font-size:13.5px} .iv-greet-bd textarea{min-height:64px;resize:vertical} .iv-greet-bd input:focus,.iv-greet-bd textarea:focus{outline:none;border-color:var(--teal)} .iv-greet-act{display:flex;gap:8px;margin-top:12px} .iv-greet-act .btn{flex:1;justify-content:center} .iv-greet-note{font-size:11.5px;color:var(--mist);margin:9px 0 0;line-height:1.45} .iv-greet-ok{text-align:center;padding:6px 0 2px} .iv-greet-ok .tick{font-size:30px;line-height:1;color:#22c55e} .iv-greet-err{color:#f87171;font-size:12.5px;margin-top:8px} .iv-greet-back{background:none;border:0;color:var(--mist);font-size:12px;cursor:pointer;padding:4px 0;text-decoration:underline} .iv-greet-back:hover{color:var(--teal)} @media (max-width:560px){ .iv-greet{left:12px;right:12px;width:auto;bottom:88px} .iv-greet-bd{max-height:54vh} } @media (prefers-reduced-motion:reduce){.iv-greet{transition:none}} .iv-dock{position:fixed;right:22px;bottom:20px;z-index:999;display:flex;flex-direction:column; align-items:flex-end;gap:8px;font-family:var(--f-body,inherit)} .iv-dock-status{display:flex;align-items:center;gap:7px;padding:5px 12px;border-radius:999px; background:var(--navy);border:1px solid var(--line);color:var(--ink); font-size:11.5px;font-weight:600;line-height:1.5;box-shadow:0 6px 18px rgba(5,9,15,.35)} .iv-dot{width:8px;height:8px;border-radius:50%;background:var(--mist);flex:none} .iv-dock.is-online .iv-dot{background:#25d366;box-shadow:0 0 0 3px rgba(37,211,102,.22); animation:ivPing 2.2s ease infinite} @keyframes ivPing{0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)}70%{box-shadow:0 0 0 7px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}} .iv-dock-actions{display:flex;align-items:center;gap:8px;padding:6px;border-radius:999px; background:var(--navy);border:1px solid var(--line);box-shadow:0 14px 34px -10px rgba(5,9,15,.6)} .iv-call,.iv-wa{display:grid;place-items:center;width:46px;height:46px;border-radius:50%; text-decoration:none;transition:transform .2s,background .2s,color .2s} .iv-call{background:var(--navy-soft);color:var(--teal)} .iv-call:hover{background:var(--teal-light);color:var(--teal-dark);transform:scale(1.06)} .iv-wa{background:#25d366;color:#fff} .iv-wa:hover{background:#2ee077;color:#fff;transform:scale(1.06)} .iv-quote{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 18px; border-radius:999px;background:linear-gradient(135deg,var(--teal) 0%,var(--teal-deep) 100%); color:#04231f;font-family:var(--f-head,inherit);font-size:12.5px;font-weight:700; letter-spacing:.06em;text-transform:uppercase;text-decoration:none;white-space:nowrap; box-shadow:0 0 18px var(--teal-glow);transition:transform .2s,box-shadow .2s} .iv-quote:hover{transform:translateY(-1px);box-shadow:0 0 26px var(--teal-glow);color:#04231f} .iv-tip{position:absolute;right:0;bottom:calc(100% + 12px);width:304px;max-width:calc(100vw - 32px); padding:15px 16px 14px;border-radius:16px;background:var(--navy);border:1px solid var(--line); box-shadow:0 24px 60px -20px rgba(5,9,15,.8);animation:ivTipIn .3s ease both} .iv-tip[hidden]{display:none} .iv-tip::after{content:"";position:absolute;right:171px;bottom:-7px;width:12px;height:12px; background:var(--navy);border-right:1px solid var(--line);border-bottom:1px solid var(--line); transform:rotate(45deg)} .iv-tip b{display:block;margin:0 26px 3px 0;color:var(--teal);font-size:14.5px;font-weight:700;line-height:1.3} .iv-tip p{margin:0 0 10px;color:var(--mist);font-size:12px;line-height:1.5} .iv-tip-x{position:absolute;top:7px;right:7px;width:26px;height:26px;padding:0;border:0; border-radius:50%;background:none;color:var(--mist);font-size:19px;line-height:1;cursor:pointer} .iv-tip-x:hover{background:var(--navy-soft);color:var(--ink)} .iv-tip-x:focus-visible{outline:2px solid var(--teal);outline-offset:2px} .iv-tip-chips{display:flex;flex-wrap:wrap;gap:6px} .iv-tip-chips button{padding:6px 10px;border-radius:999px;background:var(--navy-soft); border:1px solid var(--line);color:var(--ink);font-family:inherit;font-size:11.5px;font-weight:600; line-height:1.2;cursor:pointer;transition:background .15s,border-color .15s,color .15s} .iv-tip-chips button:hover{border-color:var(--teal);color:var(--teal)} .iv-tip-chips button[aria-pressed="true"]{background:var(--teal-light);border-color:var(--teal);color:var(--teal-dark)} .iv-tip-chips button:focus-visible{outline:2px solid var(--teal);outline-offset:2px} .iv-tip textarea{width:100%;box-sizing:border-box;min-height:56px;max-height:120px;margin-top:10px; resize:vertical;background:var(--panel);border:1px solid var(--line);border-radius:10px; padding:8px 10px;color:var(--ink);font-family:inherit;font-size:12.5px;line-height:1.45} .iv-tip textarea::placeholder{color:var(--mist)} .iv-tip textarea:focus{outline:none;border-color:var(--teal)} .iv-tip-send{display:flex;align-items:center;justify-content:center;gap:7px;width:100%; box-sizing:border-box;margin-top:8px;min-height:38px;padding:0 14px;border-radius:999px; background:#25d366;color:#fff;font-size:12.5px;font-weight:700;text-decoration:none; transition:background .15s} .iv-tip-send:hover{background:#2ee077;color:#fff} .iv-tip-send:focus-visible{outline:2px solid var(--teal);outline-offset:2px} @keyframes ivTipIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .iv-wa.is-nudging{animation:ivShake 1.1s ease 2} @keyframes ivShake{0%,100%{transform:none} 12%{transform:rotate(-11deg)}28%{transform:rotate(9deg)} 44%{transform:rotate(-7deg)}60%{transform:rotate(5deg)}76%{transform:rotate(-3deg)}} @media (max-width:560px){ .iv-dock{right:12px;bottom:12px;gap:6px} .iv-dock-actions{padding:5px;gap:6px} .iv-call,.iv-wa{width:42px;height:42px} .iv-quote{min-height:42px;padding:0 14px;font-size:11.5px} .iv-dock-status{font-size:11px;padding:4px 10px} .iv-tip{width:calc(100vw - 24px)} } @media (max-width:760px){ .iv-dock{display:none} } @media (prefers-reduced-motion:reduce){ .iv-dock.is-online .iv-dot{animation:none} .iv-call,.iv-wa,.iv-quote{transition:none} .iv-tip{animation:none} .iv-wa.is-nudging{animation:none} }