/* Wutini — Divi 4 build. Generated by divi/build_divi.py — do not edit by hand */ :root:has(.wt-s, .wt-chrome) #page-container .et_pb_section{padding:0;background-color:transparent} :root:has(.wt-s, .wt-chrome) #page-container .et_pb_row{width:100%;max-width:none;padding:0;margin:0 auto} :root:has(.wt-s, .wt-chrome) #page-container .et_pb_column{margin-bottom:0} :root:has(.wt-s, .wt-chrome) #page-container .et_pb_module{margin-bottom:0} :root:has(.wt-s, .wt-chrome) #page-container h1, :root:has(.wt-s, .wt-chrome) #page-container h2, :root:has(.wt-s, .wt-chrome) #page-container h3, :root:has(.wt-s, .wt-chrome) #page-container h4, :root:has(.wt-s, .wt-chrome) #page-container h5, :root:has(.wt-s, .wt-chrome) #page-container h6{color:inherit;padding-bottom:0;line-height:inherit;font-weight:700} :root:has(.wt-s, .wt-chrome) #page-container p{padding-bottom:0} :root:has(.wt-s, .wt-chrome) #page-container ul, :root:has(.wt-s, .wt-chrome) #page-container ol{list-style:none;padding:0;line-height:inherit} :root:has(.wt-s, .wt-chrome) #page-container .et_pb_text{line-height:inherit} :root{ --bg: #08080a; --bg-2: #0e0e11; --surface: #131317; --surface-2: #1a1a1f; --line: rgba(255, 255, 255, 0.08); --line-2: rgba(255, 255, 255, 0.14); --text: #f4f3f1; --muted: #8d8c93; --dim: #5a5960; --red: #ff2d2d; --red-2: #e01b24; --red-deep: #7a0a10; --orange: #ff6a3d; --red-glow: rgba(255, 45, 45, 0.45); --f-display: "Bricolage Grotesque", "Inter", system-ui, sans-serif; --f-body: "Inter", system-ui, sans-serif; --f-mono: "JetBrains Mono", ui-monospace, monospace; --r-sm: 10px; --r: 18px; --r-lg: 28px; --gutter: clamp(16px, 4vw, 40px); --max: 1280px; --ease: cubic-bezier(0.22, 1, 0.36, 1); } :root:has(.wt-s, .wt-chrome) #page-container *, :root:has(.wt-s, .wt-chrome) #page-container *::before, :root:has(.wt-s, .wt-chrome) #page-container *::after{ box-sizing: border-box; margin: 0; padding: 0; } html:has(.wt-s, .wt-chrome){ -webkit-text-size-adjust: 100%; overflow-x: hidden; overflow-x: clip; } html:has(.wt-s, .wt-chrome).lenis, html:has(.wt-s, .wt-chrome).lenis body{ height: auto; } .lenis.lenis-smooth{ scroll-behavior: auto !important; } :root:has(.wt-s, .wt-chrome) body{ background: var(--bg); color: var(--text); font-family: var(--f-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; overflow-x: clip; } :root:has(.wt-s, .wt-chrome) body.is-loading{ overflow: hidden; } :root:has(.wt-s, .wt-chrome) #page-container a{ color: inherit; text-decoration: none; } :root:has(.wt-s, .wt-chrome) #page-container button{ font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } :root:has(.wt-s, .wt-chrome) #page-container img, :root:has(.wt-s, .wt-chrome) #page-container svg, :root:has(.wt-s, .wt-chrome) #page-container .ico{ display: block; } :root:has(.wt-s, .wt-chrome) #page-container svg, :root:has(.wt-s, .wt-chrome) #page-container .ico{ fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } :root:has(.wt-s, .wt-chrome) #page-container ::selection{ background: var(--red); color: #fff; } :root:has(.wt-s, .wt-chrome) #page-container .container{ width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); } :root:has(.wt-s, .wt-chrome) #page-container .mono{ font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; } :root:has(.wt-s, .wt-chrome) #page-container .muted{ color: var(--muted); } :root:has(.wt-s, .wt-chrome) #page-container .center{ text-align: center; justify-content: center; } :root:has(.wt-s, .wt-chrome) #page-container em{ font-style: normal; } :root:has(.wt-s, .wt-chrome) #page-container .rec{ display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 10px var(--red); animation: rec 1.4s steps(1) infinite; } @keyframes rec{ 50% { opacity: 0.25; } } :root:has(.wt-s, .wt-chrome) #page-container .grain{ position: fixed; inset: -50%; z-index: 90; pointer-events: none; opacity: 0.06; 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='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation: grain 0.8s steps(4) infinite; } @keyframes grain{ 0% { transform: translate(0, 0); } 25% { transform: translate(-3%, 2%); } 50% { transform: translate(2%, -3%); } 75% { transform: translate(-2%, -1%); } } :root:has(.wt-s, .wt-chrome) #page-container .loader{ position: fixed; inset: 0; z-index: 200; background: var(--bg); display: grid; place-items: center; } :root:has(.wt-s, .wt-chrome) #page-container .loader-inner{ width: min(560px, 86vw); } :root:has(.wt-s, .wt-chrome) #page-container .loader-top, :root:has(.wt-s, .wt-chrome) #page-container .loader-bottom{ display: flex; justify-content: space-between; color: var(--muted); } :root:has(.wt-s, .wt-chrome) #page-container .loader-top span:first-child{ display: flex; align-items: center; gap: 8px; color: var(--text); } :root:has(.wt-s, .wt-chrome) #page-container .loader-word{ font-family: var(--f-display); font-weight: 700; font-size: clamp(64px, 14vw, 140px); letter-spacing: -0.05em; line-height: 1; margin: 18px 0; display: flex; overflow: hidden; } :root:has(.wt-s, .wt-chrome) #page-container .loader-word span{ display: inline-block; transform: translateY(110%); } :root:has(.wt-s, .wt-chrome) #page-container .loader-word .dot{ color: var(--red); } :root:has(.wt-s, .wt-chrome) #page-container .loader-bar{ height: 2px; background: var(--line); margin-bottom: 14px; overflow: hidden; } :root:has(.wt-s, .wt-chrome) #page-container .loader-bar i{ display: block; height: 100%; width: 0; background: var(--red); box-shadow: 0 0 12px var(--red); } :root:has(.wt-s, .wt-chrome) #page-container .cursor{ position: fixed; top: 0; left: 0; z-index: 150; pointer-events: none; mix-blend-mode: normal; } :root:has(.wt-s, .wt-chrome) #page-container .cursor-dot, :root:has(.wt-s, .wt-chrome) #page-container .cursor-ring{ position: absolute; border-radius: 50%; transform: translate(-50%, -50%); } :root:has(.wt-s, .wt-chrome) #page-container .cursor-dot{ width: 6px; height: 6px; background: var(--red); } :root:has(.wt-s, .wt-chrome) #page-container .cursor-ring{ width: 36px; height: 36px; border: 1px solid rgba(255, 255, 255, 0.35); display: grid; place-items: center; transition: width 0.35s var(--ease), height 0.35s var(--ease), background 0.35s, border-color 0.35s; } :root:has(.wt-s, .wt-chrome) #page-container .cursor-ring em{ font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0; transition: opacity 0.2s; } :root:has(.wt-s, .wt-chrome) #page-container .cursor.is-hover .cursor-ring{ width: 56px; height: 56px; border-color: var(--red); background: rgba(255, 45, 45, 0.08); } :root:has(.wt-s, .wt-chrome) #page-container .cursor.is-media .cursor-ring{ width: 84px; height: 84px; background: var(--red); border-color: var(--red); } :root:has(.wt-s, .wt-chrome) #page-container .cursor.is-media .cursor-ring em{ opacity: 1; } :root:has(.wt-s, .wt-chrome) #page-container .cursor.is-media .cursor-dot{ opacity: 0; } @media (hover: none), (pointer: coarse){:root:has(.wt-s, .wt-chrome) #page-container .cursor{ display: none; }} :root:has(.wt-s, .wt-chrome) #page-container .btn{ position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 48px; padding: 0 22px; border-radius: 999px; font-weight: 600; font-size: 0.95rem; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; isolation: isolate; transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.3s, background 0.3s; } :root:has(.wt-s, .wt-chrome) #page-container .btn svg, :root:has(.wt-s, .wt-chrome) #page-container .btn .ico{ width: 18px; height: 18px; transition: transform 0.4s var(--ease); } :root:has(.wt-s, .wt-chrome) #page-container .btn:hover svg, :root:has(.wt-s, .wt-chrome) #page-container .btn:hover .ico{ transform: translateX(4px); } :root:has(.wt-s, .wt-chrome) #page-container .btn-sm{ height: 40px; padding: 0 18px; font-size: 0.875rem; } :root:has(.wt-s, .wt-chrome) #page-container .btn-lg{ height: 56px; padding: 0 28px; font-size: 1rem; } :root:has(.wt-s, .wt-chrome) #page-container .btn-xl{ height: 64px; padding: 0 34px; font-size: 1.05rem; } :root:has(.wt-s, .wt-chrome) #page-container .btn-block{ width: 100%; } :root:has(.wt-s, .wt-chrome) #page-container .btn-red{ background: linear-gradient(180deg, #ff4a42, var(--red-2)); color: #fff; box-shadow: 0 0 0 1px rgba(255, 120, 110, 0.4) inset, 0 10px 30px -10px var(--red-glow); } :root:has(.wt-s, .wt-chrome) #page-container .btn-red::before{ content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120px circle at var(--bx, 50%) var(--by, 50%), rgba(255, 255, 255, 0.35), transparent 60%); opacity: 0; transition: opacity 0.3s; } :root:has(.wt-s, .wt-chrome) #page-container .btn-red:hover::before{ opacity: 1; } :root:has(.wt-s, .wt-chrome) #page-container .btn-red:hover{ box-shadow: 0 0 0 1px rgba(255, 140, 130, 0.6) inset, 0 16px 44px -10px rgba(255, 45, 45, 0.7); } :root:has(.wt-s, .wt-chrome) #page-container .btn-ghost{ border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(8px); } :root:has(.wt-s, .wt-chrome) #page-container .btn-ghost:hover{ border-color: rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.06); } :root:has(.wt-s, .wt-chrome) #page-container .link-arrow{ display: inline-flex; align-items: center; gap: 6px; font-weight: 500; color: var(--text); } :root:has(.wt-s, .wt-chrome) #page-container .link-arrow .ico, :root:has(.wt-s, .wt-chrome) #page-container .link-arrow svg{ width: 16px; height: 16px; transition: transform 0.35s var(--ease); } :root:has(.wt-s, .wt-chrome) #page-container .link-arrow:hover .ico, :root:has(.wt-s, .wt-chrome) #page-container .link-arrow:hover svg{ transform: translate(3px, -3px); } :root:has(.wt-s, .wt-chrome) #page-container .link-arrow:hover{ color: #fff; } :root:has(.wt-s, .wt-chrome) #page-container .eyebrow{ display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } :root:has(.wt-s, .wt-chrome) #page-container .eyebrow .mono{ color: var(--red); font-size: inherit; } :root:has(.wt-s, .wt-chrome) #page-container .eyebrow::after{ content: ""; width: 36px; height: 1px; background: var(--line-2); } :root:has(.wt-s, .wt-chrome) #page-container .eyebrow.center{ display: flex; } :root:has(.wt-s, .wt-chrome) #page-container .eyebrow.center::after{ display: none; } :root:has(.wt-s, .wt-chrome) #page-container .sec-title{ font-family: var(--f-display); font-weight: 600; font-size: clamp(2.2rem, 5.4vw, 4.6rem); line-height: 0.98; letter-spacing: -0.045em; margin: 18px 0 18px; max-width: 16ch; } :root:has(.wt-s, .wt-chrome) #page-container .sec-title em, :root:has(.wt-s, .wt-chrome) #page-container .hero-title em, :root:has(.wt-s, .wt-chrome) #page-container .cta-title em{ font-style: italic; font-weight: 500; background: linear-gradient(100deg, #ff6a3d 0%, var(--red) 45%, #ff3d6e 100%); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: 0.06em; } :root:has(.wt-s, .wt-chrome) #page-container .sec-sub{ color: var(--muted); font-size: clamp(1rem, 1.3vw, 1.125rem); max-width: 54ch; } :root:has(.wt-s, .wt-chrome) #page-container .sec-head{ margin-bottom: clamp(40px, 6vw, 72px); } :root:has(.wt-s, .wt-chrome) #page-container .sec-head.center{ display: flex; flex-direction: column; align-items: center; text-align: center; } :root:has(.wt-s, .wt-chrome) #page-container .sec-head.center .sec-title{ margin-left: auto; margin-right: auto; } :root:has(.wt-s, .wt-chrome) #page-container .sec-head-row{ display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; } :root:has(.wt-s, .wt-chrome) #page-container .sec-head-row .sec-title{ margin-bottom: 0; } :root:has(.wt-s, .wt-chrome) #page-container .section { position: relative; padding: clamp(64px, 12vw, 160px) 0 !important;} :root:has(.wt-s, .wt-chrome) #page-container main > section + section, :root:has(.wt-s, .wt-chrome) #page-container main > .et_pb_text_inner > section + section{ border-top: 1px solid var(--line-2); } :root:has(.wt-s, .wt-chrome) #page-container .marquee-band{ border-bottom: 0 !important; } :root:has(.wt-s, .wt-chrome) #page-container em.is-split{ background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; color: inherit !important; padding: 0 !important; } :root:has(.wt-s, .wt-chrome) #page-container em.is-split .w > .et_pb_text_inner > span, :root:has(.wt-s, .wt-chrome) #page-container em.is-split .w > span{ background: linear-gradient(100deg, #ff6a3d 0%, var(--red) 55%, #ff3d6e 100%); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: 0.06em; } :root:has(.wt-s, .wt-chrome) #page-container .w{ display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; } :root:has(.wt-s, .wt-chrome) #page-container .w > span, :root:has(.wt-s, .wt-chrome) #page-container .w > .et_pb_text_inner > span{ display: inline-block; will-change: transform; } :root:has(.wt-s, .wt-chrome) #page-container .spot{ position: relative; } :root:has(.wt-s, .wt-chrome) #page-container .spot::after{ content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(400px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 60, 50, 0.12), transparent 45%); opacity: 0; transition: opacity 0.4s; } :root:has(.wt-s, .wt-chrome) #page-container .spot:hover::after{ opacity: 1; } :root:has(.wt-s, .wt-chrome) #page-container .wt-nav{ position: fixed; top: 0; left: 0; right: 0; z-index: 100; transition: transform 0.5s var(--ease); } :root:has(.wt-s, .wt-chrome) #page-container .wt-nav::before{ content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8, 8, 10, 0.92), rgba(8, 8, 10, 0.7)); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); opacity: 0; transition: opacity 0.4s; } :root:has(.wt-s, .wt-chrome) #page-container .wt-nav.is-scrolled::before{ opacity: 1; } :root:has(.wt-s, .wt-chrome) #page-container .wt-nav.is-hidden{ transform: translateY(-100%); } :root:has(.wt-s, .wt-chrome) #page-container .nav-bar{ display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 24px; } :root:has(.wt-s, .wt-chrome) #page-container .logo{ display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-display); font-weight: 700; font-size: 1.45rem; letter-spacing: -0.04em; } :root:has(.wt-s, .wt-chrome) #page-container .logo-mark{ width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: linear-gradient(140deg, #ff5a48, var(--red-2)); box-shadow: 0 6px 18px -6px var(--red-glow); } :root:has(.wt-s, .wt-chrome) #page-container .logo-mark i{ width: 0; height: 0; border-left: 9px solid #fff; border-top: 6px solid transparent; border-bottom: 6px solid transparent; margin-left: 2px; } :root:has(.wt-s, .wt-chrome) #page-container .nav-links{ display: flex; gap: 4px; } :root:has(.wt-s, .wt-chrome) #page-container .nav-links a{ position: relative; padding: 8px 14px; font-size: 0.9rem; color: var(--muted); border-radius: 999px; transition: color 0.25s, background 0.25s; } :root:has(.wt-s, .wt-chrome) #page-container .nav-links a:hover, :root:has(.wt-s, .wt-chrome) #page-container .nav-links a.is-active{ color: var(--text); background: rgba(255, 255, 255, 0.05); } :root:has(.wt-s, .wt-chrome) #page-container .nav-right{ display: flex; align-items: center; gap: 16px; } :root:has(.wt-s, .wt-chrome) #page-container .nav-tc{ display: inline-flex; align-items: center; gap: 8px; color: var(--muted); padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; } :root:has(.wt-s, .wt-chrome) #page-container .nav-tc b{ font-weight: 500; color: var(--text); font-variant-numeric: tabular-nums; } :root:has(.wt-s, .wt-chrome) #page-container .burger{ display: none; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line-2); position: relative; } :root:has(.wt-s, .wt-chrome) #page-container .burger span{ position: absolute; left: 12px; right: 12px; height: 1.5px; background: var(--text); transition: transform 0.4s var(--ease), top 0.4s var(--ease); } :root:has(.wt-s, .wt-chrome) #page-container .burger span:first-child{ top: 16px; } :root:has(.wt-s, .wt-chrome) #page-container .burger span:last-child{ top: 24px; } :root:has(.wt-s, .wt-chrome) #page-container .burger[aria-expanded="true"] span:first-child{ top: 20px; transform: rotate(45deg); } :root:has(.wt-s, .wt-chrome) #page-container .burger[aria-expanded="true"] span:last-child{ top: 20px; transform: rotate(-45deg); } :root:has(.wt-s, .wt-chrome) #page-container .scrubber{ height: 14px; } :root:has(.wt-s, .wt-chrome) #page-container .scrubber-track{ position: relative; height: 100%; } :root:has(.wt-s, .wt-chrome) #page-container .scrubber-marks{ position: absolute; inset: 0 var(--gutter); background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.14) 0 1px, transparent 1px 10px); -webkit-mask: linear-gradient(180deg, transparent 0 55%, #000 55%); mask: linear-gradient(180deg, transparent 0 55%, #000 55%); } :root:has(.wt-s, .wt-chrome) #page-container .scrubber-fill{ position: absolute; left: var(--gutter); bottom: 0; height: 2px; width: 0; background: linear-gradient(90deg, transparent, var(--red)); box-shadow: 0 0 10px var(--red); } :root:has(.wt-s, .wt-chrome) #page-container .scrubber-head{ position: absolute; bottom: 0; left: var(--gutter); width: 2px; height: 14px; background: var(--red); box-shadow: 0 0 12px var(--red); } :root:has(.wt-s, .wt-chrome) #page-container .scrubber-head::before{ content: ""; position: absolute; top: -4px; left: -4px; width: 10px; height: 6px; background: var(--red); clip-path: polygon(0 0, 100% 0, 50% 100%); } :root:has(.wt-s, .wt-chrome) #page-container .mobile-menu{ position: fixed; inset: 0; z-index: 95; background: rgba(8, 8, 10, 0.97); backdrop-filter: blur(20px); padding: 120px var(--gutter) 40px; display: flex; flex-direction: column; justify-content: space-between; clip-path: inset(0 0 100% 0); transition: clip-path 0.7s var(--ease); visibility: hidden; } :root:has(.wt-s, .wt-chrome) #page-container .mobile-menu.is-open{ clip-path: inset(0 0 0 0); visibility: visible; } :root:has(.wt-s, .wt-chrome) #page-container .mobile-menu nav{ display: flex; flex-direction: column; } :root:has(.wt-s, .wt-chrome) #page-container .mobile-menu nav a{ font-family: var(--f-display); font-size: clamp(2rem, 9vw, 3rem); font-weight: 600; letter-spacing: -0.04em; padding: 10px 0; border-bottom: 1px solid var(--line); display: flex; align-items: baseline; gap: 14px; } :root:has(.wt-s, .wt-chrome) #page-container .mobile-menu nav a small{ font-family: var(--f-mono); font-size: 0.75rem; color: var(--red); } :root:has(.wt-s, .wt-chrome) #page-container .hero{ position: relative; padding: clamp(140px, 18vh, 200px) 0 clamp(90px, 12vw, 150px); overflow: hidden; } :root:has(.wt-s, .wt-chrome) #page-container .hero-bg{ position: absolute; inset: 0; z-index: -1; pointer-events: none; } :root:has(.wt-s, .wt-chrome) #page-container .grid-bg{ position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask: radial-gradient(ellipse 80% 60% at 50% 30%, #000 30%, transparent 80%); mask: radial-gradient(ellipse 80% 60% at 50% 30%, #000 30%, transparent 80%); } :root:has(.wt-s, .wt-chrome) #page-container .glow{ position: absolute; border-radius: 50%; filter: blur(90px); } :root:has(.wt-s, .wt-chrome) #page-container .glow-1{ width: 760px; height: 520px; left: 50%; top: 32%; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(255, 40, 40, 0.42), transparent); } :root:has(.wt-s, .wt-chrome) #page-container .glow-2{ width: 520px; height: 420px; right: -120px; top: -80px; background: radial-gradient(closest-side, rgba(255, 106, 61, 0.22), transparent); } :root:has(.wt-s, .wt-chrome) #page-container .hero-arc{ position: absolute; left: 50%; top: 120px; width: 1400px; height: 1400px; transform: translateX(-50%); border-radius: 50%; border: 1px solid rgba(255, 70, 60, 0.25); box-shadow: 0 0 80px rgba(255, 45, 45, 0.15) inset, 0 -2px 40px rgba(255, 45, 45, 0.15); -webkit-mask: linear-gradient(180deg, #000 0 20%, transparent 45%); mask: linear-gradient(180deg, #000 0 20%, transparent 45%); } :root:has(.wt-s, .wt-chrome) #page-container .hero-content{ display: flex; flex-direction: column; align-items: center; text-align: center; } :root:has(.wt-s, .wt-chrome) #page-container .hero-eyebrow{ padding: 8px 14px 8px 12px; border: 1px solid var(--line-2); border-radius: 999px; background: rgba(255, 255, 255, 0.03); color: var(--text); } :root:has(.wt-s, .wt-chrome) #page-container .hero-eyebrow::after{ display: none; } :root:has(.wt-s, .wt-chrome) #page-container .hero-title{ font-family: var(--f-display); font-weight: 650; font-variation-settings: "opsz" 96; font-size: clamp(2.7rem, 8.2vw, 7.4rem); line-height: 0.94; letter-spacing: -0.045em; margin: 26px 0 26px; } :root:has(.wt-s, .wt-chrome) #page-container .ln{ display: block; overflow: hidden; padding: 0 0.12em 0.06em; margin: 0 -0.12em; } :root:has(.wt-s, .wt-chrome) #page-container .ln > .et_pb_text_inner > span, :root:has(.wt-s, .wt-chrome) #page-container .ln > span{ display: inline-block; } :root:has(.wt-s, .wt-chrome) #page-container .hero-sub{ max-width: 58ch; color: var(--muted); font-size: clamp(1rem, 1.4vw, 1.2rem); } :root:has(.wt-s, .wt-chrome) #page-container .hero-sub b{ color: var(--text); font-weight: 600; } :root:has(.wt-s, .wt-chrome) #page-container .hero-ctas{ display: flex; align-items: center; gap: 14px; margin-top: 36px; flex-wrap: wrap; justify-content: center; } :root:has(.wt-s, .wt-chrome) #page-container .hero-ctas .link-arrow{ margin-left: 8px; } :root:has(.wt-s, .wt-chrome) #page-container .hero-proof{ display: flex; align-items: center; gap: 14px; margin-top: 32px; text-align: left; } :root:has(.wt-s, .wt-chrome) #page-container .hero-proof small{ color: var(--muted); font-size: 0.85rem; } :root:has(.wt-s, .wt-chrome) #page-container .hero-proof small b{ color: var(--text); } :root:has(.wt-s, .wt-chrome) #page-container .avatars{ display: flex; } :root:has(.wt-s, .wt-chrome) #page-container .avatars span{ width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--bg); margin-left: -10px; background: #222 center / cover; } :root:has(.wt-s, .wt-chrome) #page-container .avatars span:first-child{ margin-left: 0; } :root:has(.wt-s, .wt-chrome) #page-container .avatars .more{ display: grid; place-items: center; background: var(--surface-2); font-size: 0.8rem; color: var(--muted); } :root:has(.wt-s, .wt-chrome) #page-container .stars{ color: #ffb23d; letter-spacing: 2px; font-size: 0.85rem; line-height: 1.2; } :root:has(.wt-s, .wt-chrome) #page-container .editor-wrap{ position: relative; margin-top: clamp(56px, 8vw, 96px); perspective: 1800px; padding-bottom: 40px; } :root:has(.wt-s, .wt-chrome) #page-container .editor{ position: relative; border-radius: 16px; overflow: hidden; background: linear-gradient(180deg, #16161b, #0e0e12); border: 1px solid var(--line-2); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 40px 120px -30px rgba(255, 45, 45, 0.35), 0 30px 80px -20px rgba(0, 0, 0, 0.8); transform-origin: 50% 0%; transform: rotateX(18deg) scale(0.92); font-size: 11px; } :root:has(.wt-s, .wt-chrome) #page-container .editor::before{ content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3; border-radius: inherit; background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 18%); } :root:has(.wt-s, .wt-chrome) #page-container .ed-titlebar{ display: flex; align-items: center; justify-content: space-between; height: 36px; padding: 0 14px; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, 0.02); } :root:has(.wt-s, .wt-chrome) #page-container .ed-dots{ display: flex; gap: 6px; } :root:has(.wt-s, .wt-chrome) #page-container .ed-dots i{ width: 10px; height: 10px; border-radius: 50%; background: #3a3a40; } :root:has(.wt-s, .wt-chrome) #page-container .ed-dots i:first-child{ background: #ff5f57; } :root:has(.wt-s, .wt-chrome) #page-container .ed-dots i:nth-child(2){ background: #febc2e; } :root:has(.wt-s, .wt-chrome) #page-container .ed-dots i:last-child{ background: #28c840; } :root:has(.wt-s, .wt-chrome) #page-container .ed-file{ color: var(--muted); font-size: 10px; text-transform: none; letter-spacing: 0.02em; } :root:has(.wt-s, .wt-chrome) #page-container .ed-tc{ color: var(--red); font-size: 12px; font-variant-numeric: tabular-nums; } :root:has(.wt-s, .wt-chrome) #page-container .ed-body{ display: grid; grid-template-columns: 200px 1fr 200px; border-bottom: 1px solid var(--line); } :root:has(.wt-s, .wt-chrome) #page-container .ed-panel{ padding: 12px; display: flex; flex-direction: column; gap: 8px; } :root:has(.wt-s, .wt-chrome) #page-container .ed-left{ border-right: 1px solid var(--line); } :root:has(.wt-s, .wt-chrome) #page-container .ed-right{ border-left: 1px solid var(--line); } :root:has(.wt-s, .wt-chrome) #page-container .ed-label{ font-size: 9px; color: var(--dim); display: flex; align-items: center; gap: 6px; margin-top: 4px; } :root:has(.wt-s, .wt-chrome) #page-container .ed-label .rec{ width: 6px; height: 6px; } :root:has(.wt-s, .wt-chrome) #page-container .ed-bin{ list-style: none; display: flex; flex-direction: column; gap: 6px; } :root:has(.wt-s, .wt-chrome) #page-container .ed-bin li{ display: flex; align-items: center; gap: 8px; padding: 5px; border-radius: 6px; transition: background 0.3s; } :root:has(.wt-s, .wt-chrome) #page-container .ed-bin li.is-hot{ background: rgba(255, 45, 45, 0.12); } :root:has(.wt-s, .wt-chrome) #page-container .ed-bin .th{ width: 38px; height: 24px; border-radius: 4px; flex: none; background: linear-gradient(135deg, hsl(var(--h) 70% 45%), hsl(var(--h) 60% 14%)); } :root:has(.wt-s, .wt-chrome) #page-container .ed-bin b{ display: block; font-weight: 500; font-size: 10px; color: #d8d7dc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; } :root:has(.wt-s, .wt-chrome) #page-container .ed-bin small{ color: var(--dim); font-family: var(--f-mono); font-size: 9px; } :root:has(.wt-s, .wt-chrome) #page-container .ed-fx{ list-style: none; display: flex; flex-direction: column; gap: 4px; font-size: 9px; color: var(--muted); text-transform: none; } :root:has(.wt-s, .wt-chrome) #page-container .ed-fx li{ padding: 4px 6px; border-radius: 4px; background: rgba(255, 255, 255, 0.03); } :root:has(.wt-s, .wt-chrome) #page-container .ed-fx li::before{ content: "fx "; color: var(--red); } :root:has(.wt-s, .wt-chrome) #page-container .ed-viewer{ padding: 12px 16px; display: flex; flex-direction: column; gap: 10px; } :root:has(.wt-s, .wt-chrome) #page-container .ed-pgm{ margin-top: 0; color: var(--muted); } :root:has(.wt-s, .wt-chrome) #page-container .screen{ position: relative; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: #000; } :root:has(.wt-s, .wt-chrome) #page-container .scene{ position: absolute; inset: 0; opacity: 0; transition: opacity 0.5s; } :root:has(.wt-s, .wt-chrome) #page-container .scene.is-on{ opacity: 1; } :root:has(.wt-s, .wt-chrome) #page-container .scene-a{ background: radial-gradient(60% 80% at 70% 40%, rgba(255, 120, 80, 0.55), transparent 60%), radial-gradient(40% 60% at 30% 70%, rgba(255, 45, 45, 0.6), transparent 60%), linear-gradient(160deg, #2a0a0c, #0b0506); } :root:has(.wt-s, .wt-chrome) #page-container .scene-a::after{ content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 18% 30%, rgba(255, 200, 160, 0.5) 0 2.5%, transparent 3%), radial-gradient(circle at 26% 62%, rgba(255, 120, 90, 0.4) 0 4%, transparent 4.5%), radial-gradient(circle at 82% 22%, rgba(255, 230, 200, 0.35) 0 3%, transparent 3.5%), radial-gradient(circle at 74% 70%, rgba(255, 90, 70, 0.35) 0 5%, transparent 5.5%), radial-gradient(circle at 60% 40%, rgba(255, 170, 120, 0.3) 0 2%, transparent 2.5%); filter: blur(2px); animation: drift 8s ease-in-out infinite alternate; } @keyframes drift{ to { transform: scale(1.08) translateX(-2%); } } :root:has(.wt-s, .wt-chrome) #page-container .scene-b{ background: linear-gradient(180deg, #1b0f16 0%, #48152a 38%, #ff6a3d 62%, #2a0b0b 63%, #0d0607 100%); } :root:has(.wt-s, .wt-chrome) #page-container .scene-b::after{ content: ""; position: absolute; left: 0; right: 0; bottom: 37%; height: 30%; background: linear-gradient(90deg, transparent 0 8%, #0d0607 8% 14%, transparent 14% 30%, #0d0607 30% 33%, transparent 33% 60%, #0d0607 60% 70%, transparent 70%); clip-path: polygon(0 100%, 6% 40%, 14% 70%, 24% 20%, 36% 60%, 48% 30%, 60% 75%, 72% 10%, 84% 55%, 100% 30%, 100% 100%); } :root:has(.wt-s, .wt-chrome) #page-container .scene-c{ background: radial-gradient(30% 40% at 50% 50%, rgba(255, 255, 255, 0.9), rgba(255, 90, 60, 0.6) 30%, transparent 70%), conic-gradient(from 0deg at 50% 50%, #1a0507, #4a0d12, #1a0507, #3a0a0e, #1a0507); } :root:has(.wt-s, .wt-chrome) #page-container .screen-safe{ position: absolute; inset: 8%; border: 1px dashed rgba(255, 255, 255, 0.18); border-radius: 4px; } :root:has(.wt-s, .wt-chrome) #page-container .screen-caption{ position: absolute; left: 50%; bottom: 14%; transform: translateX(-50%); padding: 6px 12px; border-radius: 6px; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(4px); font-family: var(--f-display); font-weight: 700; font-size: clamp(11px, 1.4vw, 18px); letter-spacing: -0.02em; white-space: nowrap; } :root:has(.wt-s, .wt-chrome) #page-container .screen-caption span::after{ content: "|"; color: var(--red); margin-left: 2px; animation: rec 0.8s steps(1) infinite; } :root:has(.wt-s, .wt-chrome) #page-container .screen-meta{ position: absolute; top: 10px; left: 12px; right: 12px; display: flex; justify-content: space-between; font-size: 9px; color: rgba(255, 255, 255, 0.7); } :root:has(.wt-s, .wt-chrome) #page-container .ed-controls{ display: flex; align-items: center; justify-content: center; gap: 18px; color: var(--muted); font-size: 10px; position: relative; } :root:has(.wt-s, .wt-chrome) #page-container .ed-controls .play{ color: var(--text); width: 26px; height: 26px; border-radius: 50%; background: var(--red); display: grid; place-items: center; font-size: 9px; } :root:has(.wt-s, .wt-chrome) #page-container .ed-meter{ position: absolute; right: 0; display: flex; gap: 3px; } :root:has(.wt-s, .wt-chrome) #page-container .ed-meter i{ width: 4px; height: 16px; background: linear-gradient(0deg, #28c840, #febc2e 70%, var(--red)); border-radius: 1px; transform-origin: bottom; animation: meter 0.5s ease-in-out infinite alternate; } :root:has(.wt-s, .wt-chrome) #page-container .ed-meter i:last-child{ animation-delay: 0.2s; } @keyframes meter{ from { transform: scaleY(0.3); } to { transform: scaleY(1); } } :root:has(.wt-s, .wt-chrome) #page-container .ed-slider{ display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 8px; color: var(--muted); font-size: 10px; } :root:has(.wt-s, .wt-chrome) #page-container .ed-slider div{ position: relative; height: 3px; border-radius: 3px; background: var(--surface-2); } :root:has(.wt-s, .wt-chrome) #page-container .ed-slider i{ position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; border-radius: 50%; background: #fff; transform: translate(-50%, -50%); box-shadow: 0 0 0 3px rgba(255, 45, 45, 0.35); } :root:has(.wt-s, .wt-chrome) #page-container .ed-vu{ display: flex; align-items: flex-end; gap: 3px; height: 34px; } :root:has(.wt-s, .wt-chrome) #page-container .ed-vu i{ flex: 1; height: 100%; background: linear-gradient(0deg, var(--red-deep), var(--red)); border-radius: 2px; transform-origin: bottom; animation: meter 0.6s ease-in-out infinite alternate; } :root:has(.wt-s, .wt-chrome) #page-container .ed-vu i:nth-child(2n){ animation-duration: 0.45s; } :root:has(.wt-s, .wt-chrome) #page-container .ed-vu i:nth-child(3n){ animation-duration: 0.75s; animation-delay: 0.1s; } :root:has(.wt-s, .wt-chrome) #page-container .ed-vu i:nth-child(5n){ animation-duration: 0.38s; } :root:has(.wt-s, .wt-chrome) #page-container .ed-export{ display: flex; flex-direction: column; gap: 6px; font-size: 10px; color: var(--muted); } :root:has(.wt-s, .wt-chrome) #page-container .ed-export > div:not(.bar), :root:has(.wt-s, .wt-chrome) #page-container .ed-export > .et_pb_text_inner > div:not(.bar){ display: flex; justify-content: space-between; } :root:has(.wt-s, .wt-chrome) #page-container .ed-export b{ color: var(--text); font-weight: 500; font-family: var(--f-mono); font-size: 9px; } :root:has(.wt-s, .wt-chrome) #page-container .ed-export .bar{ height: 4px; border-radius: 4px; background: var(--surface-2); overflow: hidden; } :root:has(.wt-s, .wt-chrome) #page-container .ed-export .bar i{ display: block; height: 100%; width: 0; background: var(--red); box-shadow: 0 0 8px var(--red); } :root:has(.wt-s, .wt-chrome) #page-container .ed-timeline{ padding: 8px 12px 14px; } :root:has(.wt-s, .wt-chrome) #page-container .ed-ruler{ display: flex; justify-content: space-between; padding-left: 36px; color: var(--dim); font-size: 9px; margin-bottom: 6px; position: relative; } :root:has(.wt-s, .wt-chrome) #page-container .ed-ruler::after{ content: ""; position: absolute; left: 36px; right: 0; bottom: -3px; height: 4px; background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.15) 0 1px, transparent 1px 8px); } :root:has(.wt-s, .wt-chrome) #page-container .ed-tracks{ position: relative; display: flex; flex-direction: column; gap: 4px; } :root:has(.wt-s, .wt-chrome) #page-container .track{ display: grid; grid-template-columns: 30px 1fr; gap: 6px; align-items: center; } :root:has(.wt-s, .wt-chrome) #page-container .track label{ color: var(--dim); font-size: 9px; text-align: center; background: var(--surface); border-radius: 4px; padding: 3px 0; } :root:has(.wt-s, .wt-chrome) #page-container .lane{ position: relative; height: 26px; border-radius: 4px; background: rgba(255, 255, 255, 0.02); } :root:has(.wt-s, .wt-chrome) #page-container .clip{ position: absolute; top: 0; bottom: 0; border-radius: 4px; padding: 0 8px; display: flex; align-items: center; font-family: var(--f-mono); font-size: 8.5px; letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; color: rgba(255, 255, 255, 0.85); border: 1px solid rgba(255, 255, 255, 0.12); } :root:has(.wt-s, .wt-chrome) #page-container .c-title{ background: linear-gradient(180deg, #7a2be0, #4c1597); } :root:has(.wt-s, .wt-chrome) #page-container .c-video{ background: linear-gradient(180deg, #d82a2a, #8a1218); } :root:has(.wt-s, .wt-chrome) #page-container .c-broll{ background: linear-gradient(180deg, #ff7a3d, #a13d14); } :root:has(.wt-s, .wt-chrome) #page-container .c-audio{ background: linear-gradient(180deg, #1f8f6a, #0f5641); } :root:has(.wt-s, .wt-chrome) #page-container .c-music{ background: linear-gradient(180deg, #2a6ad8, #163f8a); } :root:has(.wt-s, .wt-chrome) #page-container .wave::before{ content: ""; position: absolute; inset: 3px 0; opacity: 0.5; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 20' preserveAspectRatio='none'%3E%3Cg fill='white'%3E%3Crect x='0' y='8' width='1.4' height='4'/%3E%3Crect x='3' y='5' width='1.4' height='10'/%3E%3Crect x='6' y='2' width='1.4' height='16'/%3E%3Crect x='9' y='6' width='1.4' height='8'/%3E%3Crect x='12' y='3' width='1.4' height='14'/%3E%3Crect x='15' y='7' width='1.4' height='6'/%3E%3Crect x='18' y='1' width='1.4' height='18'/%3E%3Crect x='21' y='5' width='1.4' height='10'/%3E%3Crect x='24' y='8' width='1.4' height='4'/%3E%3Crect x='27' y='4' width='1.4' height='12'/%3E%3Crect x='30' y='6' width='1.4' height='8'/%3E%3Crect x='33' y='2' width='1.4' height='16'/%3E%3Crect x='36' y='7' width='1.4' height='6'/%3E%3Crect x='39' y='3' width='1.4' height='14'/%3E%3Crect x='42' y='5' width='1.4' height='10'/%3E%3Crect x='45' y='8' width='1.4' height='4'/%3E%3Crect x='48' y='2' width='1.4' height='16'/%3E%3Crect x='51' y='6' width='1.4' height='8'/%3E%3Crect x='54' y='4' width='1.4' height='12'/%3E%3Crect x='57' y='7' width='1.4' height='6'/%3E%3C/g%3E%3C/svg%3E") left center / 60px 100% repeat-x; } :root:has(.wt-s, .wt-chrome) #page-container .ed-playhead{ position: absolute; top: -12px; bottom: -4px; left: 36px; width: 2px; background: var(--red); box-shadow: 0 0 10px var(--red); z-index: 2; } :root:has(.wt-s, .wt-chrome) #page-container .ed-playhead i{ position: absolute; top: -2px; left: -5px; width: 12px; height: 10px; background: var(--red); clip-path: polygon(0 0, 100% 0, 100% 50%, 50% 100%, 0 50%); } :root:has(.wt-s, .wt-chrome) #page-container .float-chip{ position: absolute; z-index: 4; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 12px; font-size: 0.82rem; font-weight: 500; background: rgba(22, 22, 27, 0.75); border: 1px solid var(--line-2); backdrop-filter: blur(12px); box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.7); } :root:has(.wt-s, .wt-chrome) #page-container .float-chip i{ width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; font-style: normal; font-size: 11px; } :root:has(.wt-s, .wt-chrome) #page-container .float-chip .ok{ background: rgba(40, 200, 120, 0.18); } :root:has(.wt-s, .wt-chrome) #page-container .float-chip .ok::before{ content: "✓"; color: #3ddc97; } :root:has(.wt-s, .wt-chrome) #page-container .float-chip .note{ background: rgba(255, 178, 61, 0.18); } :root:has(.wt-s, .wt-chrome) #page-container .float-chip .note::before{ content: "✎"; color: #ffb23d; } :root:has(.wt-s, .wt-chrome) #page-container .float-chip .exp{ background: rgba(255, 45, 45, 0.18); } :root:has(.wt-s, .wt-chrome) #page-container .float-chip .exp::before{ content: "↗"; color: var(--red); } :root:has(.wt-s, .wt-chrome) #page-container .chip-1{ left: 0; top: 14%; } :root:has(.wt-s, .wt-chrome) #page-container .chip-2{ right: 0; top: 38%; } :root:has(.wt-s, .wt-chrome) #page-container .chip-3{ left: 6%; bottom: 14%; } :root:has(.wt-s, .wt-chrome) #page-container .marquee-band{ position: relative; padding: 28px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg-2); overflow: hidden; } :root:has(.wt-s, .wt-chrome) #page-container .marquee{ display: flex; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); } :root:has(.wt-s, .wt-chrome) #page-container .marquee-track{ display: flex; align-items: center; gap: 32px; flex: none; padding-right: 32px; will-change: transform; } :root:has(.wt-s, .wt-chrome) #page-container .marquee-track span{ font-family: var(--f-display); font-weight: 600; font-size: clamp(1.8rem, 4vw, 3.2rem); letter-spacing: -0.04em; white-space: nowrap; } :root:has(.wt-s, .wt-chrome) #page-container .marquee-track span.o{ color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.4); } :root:has(.wt-s, .wt-chrome) #page-container .marquee-track i{ color: var(--red); font-style: normal; font-size: 1.4rem; } :root:has(.wt-s, .wt-chrome) #page-container .logos{ padding-top: 64px; padding-bottom: 8px; text-align: center; } :root:has(.wt-s, .wt-chrome) #page-container .logos-label{ color: var(--dim); margin-bottom: 28px; } :root:has(.wt-s, .wt-chrome) #page-container .logos-row{ display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 28px 40px; } :root:has(.wt-s, .wt-chrome) #page-container .lg{ color: #6f6e75; font-size: 1.35rem; transition: color 0.3s; } :root:has(.wt-s, .wt-chrome) #page-container .lg:hover{ color: var(--text); } :root:has(.wt-s, .wt-chrome) #page-container .lg-1{ font-family: var(--f-display); font-weight: 700; letter-spacing: -0.04em; } :root:has(.wt-s, .wt-chrome) #page-container .lg-2{ font-family: var(--f-body); font-weight: 600; letter-spacing: -0.05em; font-size: 1.6rem; } :root:has(.wt-s, .wt-chrome) #page-container .lg-2 b{ color: var(--red); } :root:has(.wt-s, .wt-chrome) #page-container .lg-3{ font-family: var(--f-mono); font-weight: 500; font-size: 1rem; letter-spacing: 0.22em; } :root:has(.wt-s, .wt-chrome) #page-container .lg-4{ font-family: Georgia, serif; font-style: italic; font-size: 1.5rem; } :root:has(.wt-s, .wt-chrome) #page-container .lg-5{ font-family: var(--f-display); font-weight: 800; letter-spacing: 0.18em; } :root:has(.wt-s, .wt-chrome) #page-container .lg-6{ font-family: var(--f-body); font-weight: 300; letter-spacing: 0.04em; font-size: 1.45rem; } :root:has(.wt-s, .wt-chrome) #page-container .panels{ display: flex; gap: 12px; height: 540px; } :root:has(.wt-s, .wt-chrome) #page-container .panel{ position: relative; flex: 1; min-width: 0; border-radius: var(--r-lg); overflow: hidden; cursor: pointer; background: var(--surface); border: 1px solid var(--line); padding: 28px; display: flex; flex-direction: column; justify-content: space-between; transition: flex 0.8s var(--ease), border-color 0.5s, background 0.5s; } :root:has(.wt-s, .wt-chrome) #page-container .panel.is-active{ flex: 3.2; border-color: color-mix(in srgb, var(--a) 40%, transparent); cursor: default; } :root:has(.wt-s, .wt-chrome) #page-container .panel-bg{ position: absolute; inset: 0; z-index: 0; opacity: 0.35; transition: opacity 0.7s; } :root:has(.wt-s, .wt-chrome) #page-container .panel.is-active .panel-bg{ opacity: 1; } :root:has(.wt-s, .wt-chrome) #page-container .panel-bg::before{ content: ""; position: absolute; inset: 0; background: radial-gradient(80% 70% at 100% 0%, color-mix(in srgb, var(--a) 35%, transparent), transparent 60%), linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.5)); } :root:has(.wt-s, .wt-chrome) #page-container .panel-top, :root:has(.wt-s, .wt-chrome) #page-container .panel-body, :root:has(.wt-s, .wt-chrome) #page-container .panel-vtitle{ position: relative; z-index: 1; } :root:has(.wt-s, .wt-chrome) #page-container .panel-top{ display: flex; justify-content: space-between; align-items: center; } :root:has(.wt-s, .wt-chrome) #page-container .panel-top .mono{ color: var(--muted); } :root:has(.wt-s, .wt-chrome) #page-container .panel-icon{ width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line-2); color: var(--a); transition: background 0.5s, color 0.5s; } :root:has(.wt-s, .wt-chrome) #page-container .panel.is-active .panel-icon{ background: var(--a); color: #fff; box-shadow: 0 10px 30px -8px var(--a); } :root:has(.wt-s, .wt-chrome) #page-container .panel-icon .ico, :root:has(.wt-s, .wt-chrome) #page-container .panel-icon svg{ width: 22px; height: 22px; } :root:has(.wt-s, .wt-chrome) #page-container .panel-body{ max-width: 440px; opacity: 0; transform: translateY(20px); transition: opacity 0.4s, transform 0.6s var(--ease); pointer-events: none; } :root:has(.wt-s, .wt-chrome) #page-container .panel.is-active .panel-body{ opacity: 1; transform: none; transition-delay: 0.25s; pointer-events: auto; } :root:has(.wt-s, .wt-chrome) #page-container .panel-body h3{ font-family: var(--f-display); font-weight: 600; font-size: clamp(1.8rem, 3vw, 2.6rem); letter-spacing: -0.04em; line-height: 1; margin-bottom: 14px; } :root:has(.wt-s, .wt-chrome) #page-container .panel-body p{ color: #b5b4ba; margin-bottom: 18px; } :root:has(.wt-s, .wt-chrome) #page-container .tags{ display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; } :root:has(.wt-s, .wt-chrome) #page-container .tags span{ font-size: 0.78rem; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(0, 0, 0, 0.25); } :root:has(.wt-s, .wt-chrome) #page-container .panel-vtitle{ position: absolute; left: 28px; right: 24px; bottom: 28px; font-family: var(--f-display); font-weight: 600; font-size: clamp(1.15rem, 1.6vw, 1.45rem); line-height: 1.1; letter-spacing: -0.03em; transition: opacity 0.3s; } :root:has(.wt-s, .wt-chrome) #page-container .panel-vtitle::after{ content: "→"; display: block; margin-top: 10px; font-family: var(--f-body); font-size: 1rem; color: var(--a); } :root:has(.wt-s, .wt-chrome) #page-container .panel.is-active .panel-vtitle{ opacity: 0; visibility: hidden; pointer-events: none; } :root:has(.wt-s, .wt-chrome) #page-container .panel.is-active{ cursor: pointer; } :root:has(.wt-s, .wt-chrome) #page-container .panel-viz{ position: absolute; right: 28px; top: 96px; width: 40%; height: 36%; opacity: 0.9; } :root:has(.wt-s, .wt-chrome) #page-container .panel:not(.is-active) .panel-viz{ right: 50%; transform: translateX(50%); width: 70%; } :root:has(.wt-s, .wt-chrome) #page-container .viz-bars{ display: flex; align-items: flex-end; gap: 8%; } :root:has(.wt-s, .wt-chrome) #page-container .viz-bars i{ flex: 1; border-radius: 6px 6px 0 0; background: linear-gradient(180deg, var(--a), transparent); } :root:has(.wt-s, .wt-chrome) #page-container .viz-bars i:nth-child(1){ height: 20%; } :root:has(.wt-s, .wt-chrome) #page-container .viz-bars i:nth-child(2){ height: 32%; } :root:has(.wt-s, .wt-chrome) #page-container .viz-bars i:nth-child(3){ height: 28%; } :root:has(.wt-s, .wt-chrome) #page-container .viz-bars i:nth-child(4){ height: 52%; } :root:has(.wt-s, .wt-chrome) #page-container .viz-bars i:nth-child(5){ height: 70%; } :root:has(.wt-s, .wt-chrome) #page-container .viz-bars i:nth-child(6){ height: 96%; } :root:has(.wt-s, .wt-chrome) #page-container .panel.is-active .viz-bars i{ animation: grow 1.2s var(--ease) both; } :root:has(.wt-s, .wt-chrome) #page-container .viz-bars i:nth-child(2){ animation-delay: 0.08s !important; } :root:has(.wt-s, .wt-chrome) #page-container .viz-bars i:nth-child(3){ animation-delay: 0.16s !important; } :root:has(.wt-s, .wt-chrome) #page-container .viz-bars i:nth-child(4){ animation-delay: 0.24s !important; } :root:has(.wt-s, .wt-chrome) #page-container .viz-bars i:nth-child(5){ animation-delay: 0.32s !important; } :root:has(.wt-s, .wt-chrome) #page-container .viz-bars i:nth-child(6){ animation-delay: 0.4s !important; } @keyframes grow{ from { transform: scaleY(0); transform-origin: bottom; } to { transform: scaleY(1); transform-origin: bottom; } } :root:has(.wt-s, .wt-chrome) #page-container .viz-phone i{ position: absolute; width: 34%; aspect-ratio: 9 / 16; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.2); background: linear-gradient(160deg, var(--a), #1a0606 80%); } :root:has(.wt-s, .wt-chrome) #page-container .viz-phone i:nth-child(1){ left: 0; top: 18%; transform: rotate(-10deg); opacity: 0.6; } :root:has(.wt-s, .wt-chrome) #page-container .viz-phone i:nth-child(2){ left: 33%; top: 0; z-index: 2; box-shadow: 0 20px 60px -10px var(--a); } :root:has(.wt-s, .wt-chrome) #page-container .viz-phone i:nth-child(3){ left: 66%; top: 18%; transform: rotate(10deg); opacity: 0.6; } :root:has(.wt-s, .wt-chrome) #page-container .viz-wave{ display: flex; align-items: center; gap: 4%; } :root:has(.wt-s, .wt-chrome) #page-container .viz-wave i{ flex: 1; border-radius: 99px; background: var(--a); height: 30%; animation: meter 0.7s ease-in-out infinite alternate; } :root:has(.wt-s, .wt-chrome) #page-container .viz-wave i:nth-child(odd){ animation-duration: 0.5s; } :root:has(.wt-s, .wt-chrome) #page-container .viz-wave i:nth-child(3n){ animation-duration: 0.9s; height: 70%; } :root:has(.wt-s, .wt-chrome) #page-container .viz-wave i:nth-child(4n){ height: 90%; } :root:has(.wt-s, .wt-chrome) #page-container .viz-frames i{ position: absolute; width: 62%; aspect-ratio: 4 / 3; border-radius: 10px; border: 6px solid #f1ece4; background: linear-gradient(160deg, var(--a), #2a0f05); box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.8); } :root:has(.wt-s, .wt-chrome) #page-container .viz-frames i:nth-child(1){ left: 0; top: 0; transform: rotate(-8deg); } :root:has(.wt-s, .wt-chrome) #page-container .viz-frames i:nth-child(2){ left: 30%; top: 18%; transform: rotate(6deg); background: linear-gradient(200deg, #ffb23d, #3a1205); } :root:has(.wt-s, .wt-chrome) #page-container .viz-frames i:nth-child(3){ left: 12%; top: 40%; transform: rotate(-2deg); background: linear-gradient(120deg, #ff2d55, #1a0510); } :root:has(.wt-s, .wt-chrome) #page-container .proof-grid{ display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 24px; align-items: stretch; } :root:has(.wt-s, .wt-chrome) #page-container .stats{ display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; } :root:has(.wt-s, .wt-chrome) #page-container .stat{ background: var(--bg); padding: 32px 28px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; min-height: 190px; } :root:has(.wt-s, .wt-chrome) #page-container .stat b{ font-family: var(--f-display); font-weight: 600; font-size: clamp(3rem, 5.5vw, 4.6rem); letter-spacing: -0.06em; line-height: 1; } :root:has(.wt-s, .wt-chrome) #page-container .stat b .count{ font-variant-numeric: tabular-nums; } :root:has(.wt-s, .wt-chrome) #page-container .stat p{ color: var(--muted); font-size: 0.95rem; max-width: 20ch; } :root:has(.wt-s, .wt-chrome) #page-container .stat:nth-child(1) b{ color: var(--red); } :root:has(.wt-s, .wt-chrome) #page-container .chart-card{ border-radius: var(--r-lg); border: 1px solid var(--line); background: linear-gradient(180deg, var(--surface), var(--bg-2)); padding: 28px; display: flex; flex-direction: column; overflow: hidden; } :root:has(.wt-s, .wt-chrome) #page-container .chart-head{ display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; margin-bottom: 24px; } :root:has(.wt-s, .wt-chrome) #page-container .chart-head h4{ font-family: var(--f-display); font-weight: 600; font-size: 1.4rem; letter-spacing: -0.03em; margin-top: 6px; } :root:has(.wt-s, .wt-chrome) #page-container .legend{ display: flex; gap: 16px; color: var(--muted); font-size: 0.65rem; } :root:has(.wt-s, .wt-chrome) #page-container .legend span{ display: flex; align-items: center; gap: 6px; } :root:has(.wt-s, .wt-chrome) #page-container .legend i{ width: 14px; height: 3px; border-radius: 2px; } :root:has(.wt-s, .wt-chrome) #page-container .l-red{ background: var(--red); box-shadow: 0 0 8px var(--red); } :root:has(.wt-s, .wt-chrome) #page-container .l-grey{ background: #55545a; } :root:has(.wt-s, .wt-chrome) #page-container .chart{ position: relative; flex: 1; min-height: 260px; } :root:has(.wt-s, .wt-chrome) #page-container .chart-svg{ position: absolute; inset: 0 0 26px 0; width: 100%; height: calc(100% - 26px); overflow: visible; } :root:has(.wt-s, .wt-chrome) #page-container .chart-grid line{ stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; } :root:has(.wt-s, .wt-chrome) #page-container .line-red{ stroke: var(--red); stroke-width: 3; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 8px rgba(255, 45, 45, 0.8)); } :root:has(.wt-s, .wt-chrome) #page-container .line-grey{ stroke: #55545a; stroke-width: 2; stroke-dasharray: 5 6; vector-effect: non-scaling-stroke; } :root:has(.wt-s, .wt-chrome) #page-container .onboard{ stroke: rgba(255, 255, 255, 0.25); stroke-width: 1; stroke-dasharray: 2 4; vector-effect: non-scaling-stroke; } :root:has(.wt-s, .wt-chrome) #page-container .chart-tag{ position: absolute; } :root:has(.wt-s, .wt-chrome) #page-container .tag-onboard{ left: calc(170 / 600 * 100%); top: 0; transform: translateX(8px); color: var(--muted); font-size: 0.62rem; padding: 4px 8px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--bg); } :root:has(.wt-s, .wt-chrome) #page-container .tag-end{ right: 0; top: 0; text-align: right; padding: 10px 14px; border-radius: 12px; background: rgba(255, 45, 45, 0.1); border: 1px solid rgba(255, 45, 45, 0.35); } :root:has(.wt-s, .wt-chrome) #page-container .tag-end b{ display: block; font-family: var(--f-display); font-size: 1.6rem; letter-spacing: -0.04em; line-height: 1; color: #fff; } :root:has(.wt-s, .wt-chrome) #page-container .tag-end small{ color: #ff9d97; font-size: 0.6rem; } :root:has(.wt-s, .wt-chrome) #page-container .chart-x{ position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; color: var(--dim); font-size: 0.62rem; } :root:has(.wt-s, .wt-chrome) #page-container .process{ position: relative; background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } :root:has(.wt-s, .wt-chrome) #page-container .process-pin{ padding: clamp(64px, 12vw, 150px) 0; } :root:has(.wt-s, .wt-chrome) #page-container .process-head{ margin-bottom: 48px; } :root:has(.wt-s, .wt-chrome) #page-container .process-head .sec-title{ max-width: none; } :root:has(.wt-s, .wt-chrome) #page-container .process-stage{ display: grid; gap: 28px; } :root:has(.wt-s, .wt-chrome) #page-container .steps-view{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } :root:has(.wt-s, .wt-chrome) #page-container .step{ position: relative; border-radius: var(--r); padding: 24px; border: 1px solid var(--line); background: var(--bg); display: flex; flex-direction: column; gap: 18px; opacity: 0.4; transition: opacity 0.5s, border-color 0.5s, transform 0.6s var(--ease), background 0.5s; } :root:has(.wt-s, .wt-chrome) #page-container .process .step{ opacity: 1; border-color: rgba(255, 45, 45, 0.35); background: linear-gradient(180deg, rgba(255, 45, 45, 0.07), var(--bg) 70%); } :root:has(.wt-s, .wt-chrome) #page-container .process .step-num{ color: var(--red); } :root:has(.wt-s, .wt-chrome) #page-container .process .step:hover{ transform: translateY(-4px); border-color: rgba(255, 45, 45, 0.6); } :root:has(.wt-s, .wt-chrome) #page-container .step.is-done{ opacity: 0.75; } :root:has(.wt-s, .wt-chrome) #page-container .step-num{ font-family: var(--f-display); font-weight: 600; font-size: 2.6rem; letter-spacing: -0.05em; line-height: 1; color: var(--dim); transition: color 0.5s; } :root:has(.wt-s, .wt-chrome) #page-container .step.is-active .step-num{ color: var(--red); } :root:has(.wt-s, .wt-chrome) #page-container .step h3{ font-family: var(--f-display); font-weight: 600; font-size: 1.25rem; letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 8px; } :root:has(.wt-s, .wt-chrome) #page-container .step p{ color: var(--muted); font-size: 0.92rem; } :root:has(.wt-s, .wt-chrome) #page-container .seq{ border-radius: var(--r-lg); border: 1px solid var(--line-2); background: #0b0b0e; padding: 16px 18px 18px; box-shadow: 0 30px 80px -30px rgba(255, 45, 45, 0.25); } :root:has(.wt-s, .wt-chrome) #page-container .seq-top{ display: flex; justify-content: space-between; color: var(--muted); margin-bottom: 12px; } :root:has(.wt-s, .wt-chrome) #page-container .seq-top b{ color: var(--red); font-weight: 500; font-variant-numeric: tabular-nums; } :root:has(.wt-s, .wt-chrome) #page-container .seq-ruler{ margin-left: 46px; height: 10px; background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0 1px, transparent 1px 12px); -webkit-mask: linear-gradient(180deg, transparent 40%, #000 40%); mask: linear-gradient(180deg, transparent 40%, #000 40%); margin-bottom: 6px; } :root:has(.wt-s, .wt-chrome) #page-container .seq-tracks{ position: relative; display: flex; flex-direction: column; gap: 6px; } :root:has(.wt-s, .wt-chrome) #page-container .seq-track{ display: grid; grid-template-columns: 40px 1fr; gap: 6px; align-items: center; } :root:has(.wt-s, .wt-chrome) #page-container .seq-track label{ color: var(--dim); text-align: center; background: var(--surface); border-radius: 6px; padding: 6px 0; font-size: 0.62rem; } :root:has(.wt-s, .wt-chrome) #page-container .seq-lane{ position: relative; height: 54px; border-radius: 8px; background: rgba(255, 255, 255, 0.02); } :root:has(.wt-s, .wt-chrome) #page-container .seq-track:nth-child(n+2) .seq-lane{ height: 32px; } :root:has(.wt-s, .wt-chrome) #page-container .sclip{ position: absolute; top: 0; bottom: 0; border-radius: 8px; padding: 8px 12px; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 2px; background: linear-gradient(180deg, #2a2a30, #1c1c21); border: 1px solid var(--line-2); transition: background 0.5s, border-color 0.5s, box-shadow 0.5s; } :root:has(.wt-s, .wt-chrome) #page-container .sclip[data-i]{ width: 24.4%; background: linear-gradient(180deg, #e8312f, #8a1218); border-color: rgba(255, 140, 130, 0.5); } :root:has(.wt-s, .wt-chrome) #page-container .sclip[data-i] small{ color: rgba(255, 255, 255, 0.8); } :root:has(.wt-s, .wt-chrome) #page-container .sclip[data-i="0"]{ left: 0; } :root:has(.wt-s, .wt-chrome) #page-container .sclip[data-i="1"]{ left: 25.2%; } :root:has(.wt-s, .wt-chrome) #page-container .sclip[data-i="2"]{ left: 50.4%; } :root:has(.wt-s, .wt-chrome) #page-container .sclip[data-i="3"]{ left: 75.6%; } :root:has(.wt-s, .wt-chrome) #page-container .sclip b{ font-family: var(--f-display); font-weight: 600; font-size: 0.95rem; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } :root:has(.wt-s, .wt-chrome) #page-container .sclip small{ color: var(--muted); font-size: 0.58rem; white-space: nowrap; } :root:has(.wt-s, .wt-chrome) #page-container .sclip.is-active{ background: linear-gradient(180deg, #e8312f, #8a1218); border-color: rgba(255, 140, 130, 0.6); box-shadow: 0 10px 30px -10px var(--red-glow); } :root:has(.wt-s, .wt-chrome) #page-container .sclip.is-active small{ color: rgba(255, 255, 255, 0.8); } :root:has(.wt-s, .wt-chrome) #page-container .sclip.is-done{ background: linear-gradient(180deg, #5a1a1c, #2e0d0f); border-color: rgba(255, 45, 45, 0.3); } :root:has(.wt-s, .wt-chrome) #page-container .sclip.alt{ background: linear-gradient(180deg, #3a2160, #22133a); } :root:has(.wt-s, .wt-chrome) #page-container .sclip.aud{ background: linear-gradient(180deg, #17483a, #0e2c24); } :root:has(.wt-s, .wt-chrome) #page-container .sclip.alt small, :root:has(.wt-s, .wt-chrome) #page-container .sclip.aud small{ color: rgba(255, 255, 255, 0.7); } :root:has(.wt-s, .wt-chrome) #page-container .seq-head{ position: absolute; top: -18px; bottom: -6px; left: 46px; width: 2px; background: var(--red); box-shadow: 0 0 14px var(--red); z-index: 3; } :root:has(.wt-s, .wt-chrome) #page-container .seq-head i{ position: absolute; top: 0; left: -6px; width: 14px; height: 12px; background: var(--red); clip-path: polygon(0 0, 100% 0, 100% 50%, 50% 100%, 0 50%); } :root:has(.wt-s, .wt-chrome) #page-container .seq-progress{ margin-top: 14px; margin-left: 46px; height: 3px; background: var(--surface-2); border-radius: 3px; overflow: hidden; } :root:has(.wt-s, .wt-chrome) #page-container .seq-progress i{ display: block; height: 100%; width: 0; background: var(--red); } :root:has(.wt-s, .wt-chrome) #page-container .bento{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } :root:has(.wt-s, .wt-chrome) #page-container .b-card{ border-radius: var(--r-lg); border: 1px solid var(--line); background: linear-gradient(180deg, var(--surface), var(--bg-2)); padding: 26px; display: flex; flex-direction: column; gap: 10px; overflow: hidden; min-height: 230px; transition: border-color 0.4s, transform 0.5s var(--ease); } :root:has(.wt-s, .wt-chrome) #page-container .b-card:hover{ border-color: rgba(255, 60, 50, 0.35); transform: translateY(-4px); } :root:has(.wt-s, .wt-chrome) #page-container .b-wide{ grid-column: span 2; } :root:has(.wt-s, .wt-chrome) #page-container .b-icon{ width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(255, 45, 45, 0.12); color: var(--red); border: 1px solid rgba(255, 45, 45, 0.25); margin-bottom: 8px; } :root:has(.wt-s, .wt-chrome) #page-container .b-icon svg, :root:has(.wt-s, .wt-chrome) #page-container .b-icon .ico{ width: 20px; height: 20px; } :root:has(.wt-s, .wt-chrome) #page-container .b-card h3{ font-family: var(--f-display); font-weight: 600; font-size: 1.25rem; letter-spacing: -0.025em; line-height: 1.15; } :root:has(.wt-s, .wt-chrome) #page-container .b-card p{ color: var(--muted); font-size: 0.92rem; } :root:has(.wt-s, .wt-chrome) #page-container .b-big{ margin-top: auto; font-size: 3.4rem; letter-spacing: -0.04em; color: var(--red); line-height: 1; text-transform: none; text-shadow: 0 0 30px rgba(255, 45, 45, 0.5); } :root:has(.wt-s, .wt-chrome) #page-container .editor-card{ margin-top: auto; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--bg); border: 1px solid var(--line-2); } :root:has(.wt-s, .wt-chrome) #page-container .ec-av{ width: 40px; height: 40px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffb08a, #8a2a12); flex: none; } :root:has(.wt-s, .wt-chrome) #page-container .editor-card b{ display: block; font-size: 0.92rem; } :root:has(.wt-s, .wt-chrome) #page-container .editor-card small{ display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 0.6rem; text-transform: none; letter-spacing: 0.02em; } :root:has(.wt-s, .wt-chrome) #page-container .online{ width: 7px; height: 7px; border-radius: 50%; background: #3ddc97; box-shadow: 0 0 8px #3ddc97; } :root:has(.wt-s, .wt-chrome) #page-container .ec-badge{ margin-left: auto; padding: 4px 10px; border-radius: 99px; border: 1px solid var(--line-2); color: var(--muted); font-size: 0.6rem; } :root:has(.wt-s, .wt-chrome) #page-container .b-caption{ margin-top: auto; padding: 18px; border-radius: 12px; text-align: center; background: linear-gradient(160deg, #3a0a0e, #0b0506); font-family: var(--f-display); font-weight: 700; font-size: 1.1rem; letter-spacing: -0.02em; } :root:has(.wt-s, .wt-chrome) #page-container .b-caption mark{ background: var(--red); color: #fff; padding: 0 6px; border-radius: 4px; } :root:has(.wt-s, .wt-chrome) #page-container .b-list h3{ margin-bottom: 8px; } :root:has(.wt-s, .wt-chrome) #page-container .b-list{ grid-column: 1 / -1; min-height: 0; } :root:has(.wt-s, .wt-chrome) #page-container .b-list ul{ list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 24px; } :root:has(.wt-s, .wt-chrome) #page-container .b-list li{ display: flex; gap: 10px; color: #c9c8ce; font-size: 0.92rem; line-height: 1.4; } :root:has(.wt-s, .wt-chrome) #page-container .b-list li::before{ content: ""; flex: none; width: 16px; height: 16px; margin-top: 2px; border-radius: 50%; background: var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center / 10px no-repeat; } :root:has(.wt-s, .wt-chrome) #page-container .compare-grid{ display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(32px, 6vw, 80px); align-items: center; } :root:has(.wt-s, .wt-chrome) #page-container .compare-copy .sec-title{ font-size: clamp(2rem, 4.2vw, 3.6rem); max-width: 18ch; } :root:has(.wt-s, .wt-chrome) #page-container .compare-copy .btn{ margin-top: 30px; } :root:has(.wt-s, .wt-chrome) #page-container .compare-table{ border-radius: var(--r-lg); border: 1px solid var(--line); overflow: hidden; background: var(--bg-2); } :root:has(.wt-s, .wt-chrome) #page-container .ct-row{ display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; align-items: center; border-bottom: 1px solid var(--line); } :root:has(.wt-s, .wt-chrome) #page-container .ct-row:last-child{ border-bottom: 0; } :root:has(.wt-s, .wt-chrome) #page-container .ct-row > .et_pb_text_inner > span, :root:has(.wt-s, .wt-chrome) #page-container .ct-row > span{ padding: 16px 18px; font-size: 0.9rem; color: var(--muted); } :root:has(.wt-s, .wt-chrome) #page-container .ct-row > span[role="rowheader"], :root:has(.wt-s, .wt-chrome) #page-container .ct-row > .et_pb_text_inner > span[role="rowheader"]{ color: var(--text); font-weight: 500; } :root:has(.wt-s, .wt-chrome) #page-container .ct-head > .et_pb_text_inner > span, :root:has(.wt-s, .wt-chrome) #page-container .ct-head > span{ font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; padding-top: 20px; padding-bottom: 20px; } :root:has(.wt-s, .wt-chrome) #page-container .ct-us{ background: rgba(255, 45, 45, 0.07); color: var(--text) !important; font-weight: 600; position: relative; } :root:has(.wt-s, .wt-chrome) #page-container .ct-head .ct-us{ background: var(--red); color: #fff !important; font-family: var(--f-display); font-size: 1.05rem; letter-spacing: -0.02em; text-transform: none; } :root:has(.wt-s, .wt-chrome) #page-container .ct-row .y{ color: #3ddc97; } :root:has(.wt-s, .wt-chrome) #page-container .ct-row .ct-us.y{ color: #fff !important; } :root:has(.wt-s, .wt-chrome) #page-container .ct-row .n{ color: var(--dim); } :root:has(.wt-s, .wt-chrome) #page-container .reels{ overflow: hidden; cursor: grab; padding: 10px 0 20px; touch-action: pan-y; } :root:has(.wt-s, .wt-chrome) #page-container .reels:active{ cursor: grabbing; } :root:has(.wt-s, .wt-chrome) #page-container .reels-track{ display: flex; gap: 18px; width: max-content; padding-left: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); will-change: transform; } :root:has(.wt-s, .wt-chrome) #page-container .reel{ position: relative; flex: none; display: block; width: clamp(220px, 22vw, 300px); aspect-ratio: 9 / 16; border-radius: 22px; overflow: hidden; background: #111; border: 1px solid var(--line-2); user-select: none; -webkit-user-drag: none; transition: transform 0.6s var(--ease); } :root:has(.wt-s, .wt-chrome) #page-container .reel::before{ content: ""; position: absolute; inset: 0; background: var(--img) center / cover no-repeat; filter: saturate(0.9) contrast(1.05); transition: transform 0.9s var(--ease); } :root:has(.wt-s, .wt-chrome) #page-container .reel::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.35), transparent 30%, transparent 50%, rgba(0, 0, 0, 0.9)), linear-gradient(0deg, rgba(120, 10, 14, 0.25), rgba(120, 10, 14, 0.25)); mix-blend-mode: normal; } :root:has(.wt-s, .wt-chrome) #page-container .reel:hover{ transform: translateY(-8px); } :root:has(.wt-s, .wt-chrome) #page-container .reel:hover::before{ transform: scale(1.06); } :root:has(.wt-s, .wt-chrome) #page-container .reel-tag{ position: absolute; z-index: 2; top: 16px; left: 16px; padding: 5px 10px; border-radius: 99px; background: rgba(0, 0, 0, 0.45); backdrop-filter: blur(8px); font-size: 0.6rem; border: 1px solid rgba(255, 255, 255, 0.15); } :root:has(.wt-s, .wt-chrome) #page-container .reel-play{ position: absolute; z-index: 2; top: 50%; left: 50%; width: 60px; height: 60px; margin: -30px 0 0 -30px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.3); font-size: 16px; padding-left: 3px; opacity: 0; transform: scale(0.7); transition: opacity 0.4s, transform 0.5s var(--ease); } :root:has(.wt-s, .wt-chrome) #page-container .reel:hover .reel-play{ opacity: 1; transform: scale(1); } :root:has(.wt-s, .wt-chrome) #page-container .reel-info{ position: absolute; z-index: 2; left: 18px; right: 18px; bottom: 18px; } :root:has(.wt-s, .wt-chrome) #page-container .reel-info b{ display: block; font-family: var(--f-display); font-weight: 600; font-size: 1.15rem; letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 4px; } :root:has(.wt-s, .wt-chrome) #page-container .reel-info small{ color: #ffb0aa; font-size: 0.62rem; } :root:has(.wt-s, .wt-chrome) #page-container .pricing{ overflow: hidden; } :root:has(.wt-s, .wt-chrome) #page-container .pricing-glow{ position: absolute; left: 50%; top: 30%; width: 900px; height: 600px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(255, 45, 45, 0.18), transparent); filter: blur(60px); pointer-events: none; } :root:has(.wt-s, .wt-chrome) #page-container .toggle{ position: relative; display: inline-flex; padding: 5px; margin-top: 28px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); } :root:has(.wt-s, .wt-chrome) #page-container .toggle button{ position: relative; z-index: 1; height: 40px; padding: 0 20px; border-radius: 999px; font-size: 0.9rem; font-weight: 500; color: var(--muted); transition: color 0.3s; display: flex; align-items: center; gap: 8px; } :root:has(.wt-s, .wt-chrome) #page-container .toggle button.is-on{ color: #fff; } :root:has(.wt-s, .wt-chrome) #page-container .toggle button em{ font-size: 0.7rem; padding: 2px 8px; border-radius: 99px; background: rgba(61, 220, 151, 0.15); color: #3ddc97; font-weight: 600; } :root:has(.wt-s, .wt-chrome) #page-container .toggle-pill{ position: absolute; top: 5px; left: 5px; height: 40px; border-radius: 999px; background: var(--red); box-shadow: 0 6px 20px -6px var(--red-glow); transition: transform 0.5s var(--ease), width 0.5s var(--ease); } :root:has(.wt-s, .wt-chrome) #page-container .plans{ position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; } :root:has(.wt-s, .wt-chrome) #page-container .plan{ border-radius: var(--r-lg); border: 1px solid var(--line); background: linear-gradient(180deg, var(--surface), var(--bg-2)); padding: 32px; display: flex; flex-direction: column; gap: 24px; overflow: hidden; } :root:has(.wt-s, .wt-chrome) #page-container .plan-feat{ border-color: rgba(255, 60, 50, 0.55); background: linear-gradient(180deg, rgba(255, 45, 45, 0.14), var(--surface) 40%, var(--bg-2)); box-shadow: 0 30px 80px -30px rgba(255, 45, 45, 0.45), inset 0 1px 0 rgba(255, 140, 130, 0.25); margin-top: -14px; } :root:has(.wt-s, .wt-chrome) #page-container .plan-badge{ position: absolute; top: 24px; right: 24px; padding: 5px 12px; border-radius: 99px; background: var(--red); color: #fff; font-size: 0.6rem; } :root:has(.wt-s, .wt-chrome) #page-container .plan h3{ font-family: var(--f-display); font-weight: 600; font-size: 1.6rem; letter-spacing: -0.03em; margin-bottom: 6px; } :root:has(.wt-s, .wt-chrome) #page-container .plan-top p{ color: var(--muted); font-size: 0.92rem; max-width: 30ch; } :root:has(.wt-s, .wt-chrome) #page-container .price{ display: flex; align-items: flex-start; gap: 4px; min-height: 76px; } :root:has(.wt-s, .wt-chrome) #page-container .price .cur{ font-family: var(--f-display); font-size: 1.6rem; color: var(--muted); margin-top: 8px; } :root:has(.wt-s, .wt-chrome) #page-container .price .amt{ font-family: var(--f-display); font-weight: 600; font-size: 4.2rem; letter-spacing: -0.06em; line-height: 1; font-variant-numeric: tabular-nums; } :root:has(.wt-s, .wt-chrome) #page-container .price small{ color: var(--muted); font-size: 0.78rem; line-height: 1.3; margin: 12px 0 0 10px; } :root:has(.wt-s, .wt-chrome) #page-container .price-talk b{ font-family: var(--f-display); font-weight: 600; font-size: 3.2rem; letter-spacing: -0.05em; line-height: 1.2; font-style: italic; } :root:has(.wt-s, .wt-chrome) #page-container .feat{ list-style: none; display: flex; flex-direction: column; gap: 12px; padding-top: 22px; border-top: 1px solid var(--line); } :root:has(.wt-s, .wt-chrome) #page-container .feat li{ display: flex; gap: 12px; font-size: 0.92rem; color: #c9c8ce; line-height: 1.4; } :root:has(.wt-s, .wt-chrome) #page-container .feat li::before{ content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%; background: rgba(255, 45, 45, 0.15) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff4a42' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center / 11px no-repeat; } :root:has(.wt-s, .wt-chrome) #page-container .feat b{ color: #fff; font-weight: 600; } :root:has(.wt-s, .wt-chrome) #page-container .project-strip{ margin-top: 24px; border-radius: var(--r-lg); border: 1px dashed var(--line-2); padding: 26px 32px; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; background: rgba(255, 255, 255, 0.015); } :root:has(.wt-s, .wt-chrome) #page-container .project-strip h4{ font-family: var(--f-display); font-weight: 600; font-size: 1.5rem; letter-spacing: -0.03em; margin: 4px 0; } :root:has(.wt-s, .wt-chrome) #page-container .project-strip p{ color: var(--muted); font-size: 0.95rem; } :root:has(.wt-s, .wt-chrome) #page-container .rating{ display: flex; align-items: center; gap: 16px; padding: 16px 22px; border-radius: var(--r); border: 1px solid var(--line-2); background: var(--surface); } :root:has(.wt-s, .wt-chrome) #page-container .rating > b, :root:has(.wt-s, .wt-chrome) #page-container .rating > .et_pb_text_inner > b{ font-family: var(--f-display); font-weight: 600; font-size: 3rem; letter-spacing: -0.05em; line-height: 1; color: var(--red); } :root:has(.wt-s, .wt-chrome) #page-container .rating small{ color: var(--muted); font-size: 0.82rem; display: block; max-width: 18ch; line-height: 1.35; } :root:has(.wt-s, .wt-chrome) #page-container .t-rows{ display: flex; flex-direction: column; gap: 18px; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } :root:has(.wt-s, .wt-chrome) #page-container .t-row{ display: flex; overflow: hidden; } :root:has(.wt-s, .wt-chrome) #page-container .t-track{ display: flex; gap: 18px; padding-right: 18px; flex: none; animation: marq 60s linear infinite; } :root:has(.wt-s, .wt-chrome) #page-container .t-rev .t-track{ animation-direction: reverse; animation-duration: 70s; } :root:has(.wt-s, .wt-chrome) #page-container .t-rows:hover .t-track{ animation-play-state: paused; } @keyframes marq{ to { transform: translateX(-100%); } } :root:has(.wt-s, .wt-chrome) #page-container .tcard{ width: 400px; flex: none; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); padding: 26px; display: flex; flex-direction: column; justify-content: space-between; gap: 22px; transition: border-color 0.3s; } :root:has(.wt-s, .wt-chrome) #page-container .tcard:hover{ border-color: rgba(255, 60, 50, 0.4); } :root:has(.wt-s, .wt-chrome) #page-container .tcard blockquote{ font-size: 1.05rem; line-height: 1.5; color: #e2e1e6; } :root:has(.wt-s, .wt-chrome) #page-container .tcard figcaption{ display: flex; align-items: center; gap: 12px; } :root:has(.wt-s, .wt-chrome) #page-container .tcard .av{ width: 40px; height: 40px; border-radius: 50%; flex: none; background: #222 center / cover; } :root:has(.wt-s, .wt-chrome) #page-container .tcard b{ display: block; font-size: 0.92rem; } :root:has(.wt-s, .wt-chrome) #page-container .tcard small{ color: var(--muted); font-size: 0.8rem; } :root:has(.wt-s, .wt-chrome) #page-container .faq-grid{ display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(32px, 6vw, 96px); align-items: start; } :root:has(.wt-s, .wt-chrome) #page-container .faq-side{ position: sticky; top: 120px; } :root:has(.wt-s, .wt-chrome) #page-container .contact-cards{ display: flex; flex-direction: column; gap: 12px; margin-top: 32px; } :root:has(.wt-s, .wt-chrome) #page-container .cc{ display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); overflow: hidden; transition: border-color 0.3s; } :root:has(.wt-s, .wt-chrome) #page-container .cc:hover{ border-color: rgba(255, 60, 50, 0.4); } :root:has(.wt-s, .wt-chrome) #page-container .cc-ic{ width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: rgba(255, 45, 45, 0.12); color: var(--red); flex: none; } :root:has(.wt-s, .wt-chrome) #page-container .cc-ic svg, :root:has(.wt-s, .wt-chrome) #page-container .cc-ic .ico{ width: 20px; height: 20px; } :root:has(.wt-s, .wt-chrome) #page-container .cc b{ display: block; font-size: 0.95rem; } :root:has(.wt-s, .wt-chrome) #page-container .cc small{ color: var(--muted); font-size: 0.85rem; } :root:has(.wt-s, .wt-chrome) #page-container .accordion{ border-top: 1px solid var(--line); } :root:has(.wt-s, .wt-chrome) #page-container .acc{ border-bottom: 1px solid var(--line); } :root:has(.wt-s, .wt-chrome) #page-container .acc summary{ list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 26px 0; font-family: var(--f-display); font-weight: 500; font-size: clamp(1.1rem, 1.8vw, 1.35rem); letter-spacing: -0.02em; transition: color 0.3s; } :root:has(.wt-s, .wt-chrome) #page-container .acc summary::-webkit-details-marker{ display: none; } :root:has(.wt-s, .wt-chrome) #page-container .acc summary:hover{ color: #fff; } :root:has(.wt-s, .wt-chrome) #page-container .acc summary i{ position: relative; flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line-2); transition: background 0.4s, border-color 0.4s, transform 0.5s var(--ease); } :root:has(.wt-s, .wt-chrome) #page-container .acc summary i::before, :root:has(.wt-s, .wt-chrome) #page-container .acc summary i::after{ content: ""; position: absolute; top: 50%; left: 50%; width: 12px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); transition: transform 0.4s var(--ease); } :root:has(.wt-s, .wt-chrome) #page-container .acc summary i::after{ transform: translate(-50%, -50%) rotate(90deg); } :root:has(.wt-s, .wt-chrome) #page-container .acc[open] summary i{ background: var(--red); border-color: var(--red); transform: rotate(180deg); } :root:has(.wt-s, .wt-chrome) #page-container .acc[open] summary i::after{ transform: translate(-50%, -50%) rotate(0deg); } :root:has(.wt-s, .wt-chrome) #page-container .acc-body{ overflow: hidden; } :root:has(.wt-s, .wt-chrome) #page-container .acc-body p{ color: var(--muted); padding-bottom: 26px; max-width: 62ch; } :root:has(.wt-s, .wt-chrome) #page-container .cta{ position: relative; padding: clamp(64px, 16vw, 200px) 0; overflow: hidden; text-align: center; border-top: 1px solid var(--line); } :root:has(.wt-s, .wt-chrome) #page-container .cta-bg{ position: absolute; inset: 0; z-index: -1; } :root:has(.wt-s, .wt-chrome) #page-container .cta-bg .grid-bg{ -webkit-mask: radial-gradient(ellipse 60% 70% at 50% 60%, #000 20%, transparent 75%); mask: radial-gradient(ellipse 60% 70% at 50% 60%, #000 20%, transparent 75%); } :root:has(.wt-s, .wt-chrome) #page-container .cta-glow{ position: absolute; left: 50%; bottom: -40%; width: 1200px; height: 800px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 45, 45, 0.55), rgba(255, 45, 45, 0.12) 50%, transparent); filter: blur(40px); } :root:has(.wt-s, .wt-chrome) #page-container .cta-inner{ display: flex; flex-direction: column; align-items: center; } :root:has(.wt-s, .wt-chrome) #page-container .cta-inner .eyebrow{ color: var(--text); padding: 8px 14px; border: 1px solid var(--line-2); border-radius: 99px; background: rgba(0, 0, 0, 0.3); } :root:has(.wt-s, .wt-chrome) #page-container .cta-title{ font-family: var(--f-display); font-weight: 650; font-size: clamp(2.8rem, 9vw, 8rem); line-height: 0.92; letter-spacing: -0.06em; margin: 28px 0 24px; } :root:has(.wt-s, .wt-chrome) #page-container .cta .sec-sub{ margin: 0 auto; } :root:has(.wt-s, .wt-chrome) #page-container .footer{ padding: 80px 0 32px; border-top: 1px solid var(--line); background: var(--bg); overflow: hidden; } :root:has(.wt-s, .wt-chrome) #page-container .f-top{ display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr 1fr; gap: 40px; } :root:has(.wt-s, .wt-chrome) #page-container .f-brand p{ color: var(--muted); margin: 18px 0 24px; max-width: 34ch; font-size: 0.95rem; } :root:has(.wt-s, .wt-chrome) #page-container .socials{ display: flex; gap: 10px; } :root:has(.wt-s, .wt-chrome) #page-container .socials a{ width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-2); color: var(--muted); transition: color 0.3s, border-color 0.3s, background 0.3s; } :root:has(.wt-s, .wt-chrome) #page-container .socials a:hover{ color: #fff; border-color: var(--red); background: var(--red); } :root:has(.wt-s, .wt-chrome) #page-container .socials .ico, :root:has(.wt-s, .wt-chrome) #page-container .socials svg{ width: 17px; height: 17px; } :root:has(.wt-s, .wt-chrome) #page-container .f-col{ display: flex; flex-direction: column; gap: 12px; } :root:has(.wt-s, .wt-chrome) #page-container .f-col h5{ color: var(--dim); font-weight: 500; margin-bottom: 6px; } :root:has(.wt-s, .wt-chrome) #page-container .f-col a{ color: #c9c8ce; font-size: 0.95rem; transition: color 0.3s; width: fit-content; } :root:has(.wt-s, .wt-chrome) #page-container .f-col a:hover{ color: var(--red); } :root:has(.wt-s, .wt-chrome) #page-container .f-word{ font-family: var(--f-display); font-weight: 700; font-size: clamp(5rem, 24vw, 22rem); letter-spacing: -0.07em; line-height: 0.8; text-align: center; margin: 60px 0 30px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 85%); -webkit-background-clip: text; background-clip: text; color: transparent; } :root:has(.wt-s, .wt-chrome) #page-container .f-bottom{ display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: var(--dim); padding-top: 24px; border-top: 1px solid var(--line); } :root:has(.wt-s, .wt-chrome) #page-container .to-top:hover{ color: var(--red); } @media (max-width: 1100px){:root:has(.wt-s, .wt-chrome) #page-container .nav-links{ display: none; } :root:has(.wt-s, .wt-chrome) #page-container .burger{ display: block; } :root:has(.wt-s, .wt-chrome) #page-container .ed-body{ grid-template-columns: 160px 1fr 160px; } :root:has(.wt-s, .wt-chrome) #page-container .proof-grid, :root:has(.wt-s, .wt-chrome) #page-container .compare-grid{ grid-template-columns: 1fr; } :root:has(.wt-s, .wt-chrome) #page-container .bento{ grid-template-columns: repeat(2, 1fr); } :root:has(.wt-s, .wt-chrome) #page-container .b-list ul{ grid-template-columns: 1fr 1fr; } :root:has(.wt-s, .wt-chrome) #page-container .plans{ grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; } :root:has(.wt-s, .wt-chrome) #page-container .plan-feat{ margin-top: 0; } :root:has(.wt-s, .wt-chrome) #page-container .project-strip{ max-width: 560px; margin-left: auto; margin-right: auto; } :root:has(.wt-s, .wt-chrome) #page-container .f-top{ grid-template-columns: 1fr 1fr 1fr; } :root:has(.wt-s, .wt-chrome) #page-container .f-brand{ grid-column: 1 / -1; }} @media (max-width: 860px){:root:has(.wt-s, .wt-chrome) #page-container .nav-tc{ display: none; } :root:has(.wt-s, .wt-chrome) #page-container .ed-body{ grid-template-columns: 1fr; } :root:has(.wt-s, .wt-chrome) #page-container .ed-left, :root:has(.wt-s, .wt-chrome) #page-container .ed-right{ display: none; } :root:has(.wt-s, .wt-chrome) #page-container .float-chip{ font-size: 0.72rem; padding: 8px 10px; } :root:has(.wt-s, .wt-chrome) #page-container .chip-1{ top: -6%; left: 4%; } :root:has(.wt-s, .wt-chrome) #page-container .chip-2{ top: auto; bottom: 30%; right: 2%; } :root:has(.wt-s, .wt-chrome) #page-container .chip-3{ display: none; } :root:has(.wt-s, .wt-chrome) #page-container .panels{ flex-direction: column; height: auto; } :root:has(.wt-s, .wt-chrome) #page-container .panel{ flex: none !important; min-height: 0; padding: 24px; } :root:has(.wt-s, .wt-chrome) #page-container .panel-body{ opacity: 1; transform: none; pointer-events: auto; margin-top: 120px; } :root:has(.wt-s, .wt-chrome) #page-container .panel-vtitle{ display: none; } :root:has(.wt-s, .wt-chrome) #page-container .panel-bg{ opacity: 1; } :root:has(.wt-s, .wt-chrome) #page-container .panel-viz, :root:has(.wt-s, .wt-chrome) #page-container .panel:not(.is-active) .panel-viz{ top: 80px; transform: none; right: 24px; width: 46%; height: 120px; } :root:has(.wt-s, .wt-chrome) #page-container .panel .panel-icon{ background: var(--a); color: #fff; } :root:has(.wt-s, .wt-chrome) #page-container .steps-view{ grid-template-columns: 1fr 1fr; } :root:has(.wt-s, .wt-chrome) #page-container .process-pin{ min-height: 0; padding: 100px 0; } :root:has(.wt-s, .wt-chrome) #page-container .step, :root:has(.wt-s, .wt-chrome) #page-container .step.is-done{ opacity: 1; } :root:has(.wt-s, .wt-chrome) #page-container .step.is-active{ transform: none; } :root:has(.wt-s, .wt-chrome) #page-container .faq-grid{ grid-template-columns: 1fr; } :root:has(.wt-s, .wt-chrome) #page-container .faq-side{ position: static; } :root:has(.wt-s, .wt-chrome) #page-container .ct-row{ grid-template-columns: 1.2fr 1fr 1fr 1fr; } :root:has(.wt-s, .wt-chrome) #page-container .ct-row > .et_pb_text_inner > span, :root:has(.wt-s, .wt-chrome) #page-container .ct-row > span{ padding: 12px 10px; font-size: 0.78rem; } :root:has(.wt-s, .wt-chrome) #page-container .ct-head .ct-us{ font-size: 0.85rem; }} @media (max-width: 600px){:root:has(.wt-s, .wt-chrome) #page-container .btn-lg, :root:has(.wt-s, .wt-chrome) #page-container .btn-xl{ height: 54px; padding: 0 24px; font-size: 0.95rem; } :root:has(.wt-s, .wt-chrome) #page-container .hero-ctas{ width: 100%; } :root:has(.wt-s, .wt-chrome) #page-container .hero-ctas .btn{ flex: 1 1 100%; } :root:has(.wt-s, .wt-chrome) #page-container .hero-ctas .link-arrow{ margin: 4px auto 0; } :root:has(.wt-s, .wt-chrome) #page-container .hero-proof{ flex-direction: column; text-align: center; gap: 10px; } :root:has(.wt-s, .wt-chrome) #page-container .editor{ font-size: 9px; border-radius: 12px; } :root:has(.wt-s, .wt-chrome) #page-container .ed-titlebar .ed-file{ display: none; } :root:has(.wt-s, .wt-chrome) #page-container .track:first-child{ display: none; } :root:has(.wt-s, .wt-chrome) #page-container .clip{ font-size: 7px; padding: 0 4px; } :root:has(.wt-s, .wt-chrome) #page-container .stats{ grid-template-columns: 1fr 1fr; } :root:has(.wt-s, .wt-chrome) #page-container .stat{ padding: 22px 18px; min-height: 150px; } :root:has(.wt-s, .wt-chrome) #page-container .chart-card{ padding: 20px; } :root:has(.wt-s, .wt-chrome) #page-container .tag-onboard{ display: none; } :root:has(.wt-s, .wt-chrome) #page-container .steps-view{ grid-template-columns: 1fr; } :root:has(.wt-s, .wt-chrome) #page-container .seq-lane{ height: 46px; } :root:has(.wt-s, .wt-chrome) #page-container .sclip{ padding: 6px 8px; } :root:has(.wt-s, .wt-chrome) #page-container .sclip b{ font-size: 0.72rem; } :root:has(.wt-s, .wt-chrome) #page-container .sclip small{ display: none; } :root:has(.wt-s, .wt-chrome) #page-container .seq-track:nth-child(n+2) .sclip small{ display: block; font-size: 0.5rem; } :root:has(.wt-s, .wt-chrome) #page-container .bento{ grid-template-columns: 1fr; } :root:has(.wt-s, .wt-chrome) #page-container .b-wide{ grid-column: auto; } :root:has(.wt-s, .wt-chrome) #page-container .b-list ul{ grid-template-columns: 1fr; } :root:has(.wt-s, .wt-chrome) #page-container .compare-table{ margin: 0 calc(var(--gutter) * -1); border-radius: 0; border-left: 0; border-right: 0; } :root:has(.wt-s, .wt-chrome) #page-container .ct-row{ grid-template-columns: 1.1fr 0.9fr 0.9fr 0.9fr; } :root:has(.wt-s, .wt-chrome) #page-container .ct-row > .et_pb_text_inner > span, :root:has(.wt-s, .wt-chrome) #page-container .ct-row > span{ padding: 12px 8px; font-size: 0.72rem; } :root:has(.wt-s, .wt-chrome) #page-container .ct-head > .et_pb_text_inner > span, :root:has(.wt-s, .wt-chrome) #page-container .ct-head > span{ font-size: 0.55rem; letter-spacing: 0.02em; } :root:has(.wt-s, .wt-chrome) #page-container .plan{ padding: 26px 22px; } :root:has(.wt-s, .wt-chrome) #page-container .price .amt{ font-size: 3.6rem; } :root:has(.wt-s, .wt-chrome) #page-container .project-strip{ padding: 22px; } :root:has(.wt-s, .wt-chrome) #page-container .project-strip .btn{ width: 100%; } :root:has(.wt-s, .wt-chrome) #page-container .tcard{ width: 300px; padding: 22px; } :root:has(.wt-s, .wt-chrome) #page-container .tcard blockquote{ font-size: 0.95rem; } :root:has(.wt-s, .wt-chrome) #page-container .rating{ width: 100%; } :root:has(.wt-s, .wt-chrome) #page-container .f-top{ grid-template-columns: 1fr 1fr; } :root:has(.wt-s, .wt-chrome) #page-container .f-bottom{ justify-content: center; text-align: center; } :root:has(.wt-s, .wt-chrome) #page-container .sec-head-row .btn{ width: 100%; }} @media (prefers-reduced-motion: reduce){:root:has(.wt-s, .wt-chrome) #page-container *, :root:has(.wt-s, .wt-chrome) #page-container *::before, :root:has(.wt-s, .wt-chrome) #page-container *::after{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } :root:has(.wt-s, .wt-chrome) #page-container .grain{ display: none; }} :root:has(.wt-s, .wt-chrome) #page-container .curtain{ position: fixed; inset: 0; z-index: 180; pointer-events: none; background: var(--bg); display: grid; place-items: center; clip-path: inset(100% 0 0 0); transition: clip-path 0.55s cubic-bezier(0.76, 0, 0.24, 1); } :root:has(.wt-s, .wt-chrome) #page-container .curtain.is-out{ clip-path: inset(0 0 100% 0); } :root:has(.wt-s, .wt-chrome) #page-container .curtain.no-tr{ transition: none; } :root:has(.wt-s, .wt-chrome) #page-container .curtain-tc{ transition: opacity 0.3s; } :root:has(.wt-s, .wt-chrome) #page-container [id]{ scroll-margin-top: 110px; } :root:has(.wt-s, .wt-chrome) #page-container .curtain::before{ content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--red); box-shadow: 0 0 20px var(--red); } :root:has(.wt-s, .wt-chrome) #page-container .curtain-tc{ display: flex; align-items: center; gap: 10px; color: var(--muted); opacity: 0; } :root:has(.wt-s, .wt-chrome) #page-container .curtain.is-cover{ clip-path: inset(0 0 0 0); } :root:has(.wt-s, .wt-chrome) #page-container .curtain.is-cover .curtain-tc{ opacity: 1; } :root:has(.wt-s, .wt-chrome) #page-container .nav-links{ align-items: center; } :root:has(.wt-s, .wt-chrome) #page-container .dd{ position: relative; } :root:has(.wt-s, .wt-chrome) #page-container .dd-toggle{ display: inline-flex !important; align-items: center; gap: 4px; } :root:has(.wt-s, .wt-chrome) #page-container .dd-toggle svg, :root:has(.wt-s, .wt-chrome) #page-container .dd-toggle .ico{ width: 14px; height: 14px; transition: transform 0.35s var(--ease); } :root:has(.wt-s, .wt-chrome) #page-container .dd:hover .dd-toggle svg, :root:has(.wt-s, .wt-chrome) #page-container .dd:hover .dd-toggle .ico, :root:has(.wt-s, .wt-chrome) #page-container .dd:focus-within .dd-toggle .ico, :root:has(.wt-s, .wt-chrome) #page-container .dd:focus-within .dd-toggle svg{ transform: rotate(180deg); } :root:has(.wt-s, .wt-chrome) #page-container .dd-menu{ position: absolute; top: calc(100% + 14px); left: 50%; transform: translate(-50%, 8px); background: rgba(16, 16, 20, 0.96); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid var(--line-2); border-radius: 20px; padding: 10px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(0, 0, 0, 0.4); opacity: 0; visibility: hidden; transition: opacity 0.3s, transform 0.45s var(--ease), visibility 0.3s; } :root:has(.wt-s, .wt-chrome) #page-container .dd-menu::before{ content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; } :root:has(.wt-s, .wt-chrome) #page-container .dd:hover .dd-menu, :root:has(.wt-s, .wt-chrome) #page-container .dd:focus-within .dd-menu{ opacity: 1; visibility: visible; transform: translate(-50%, 0); } :root:has(.wt-s, .wt-chrome) #page-container .nav-bar{ position: relative; } :root:has(.wt-s, .wt-chrome) #page-container .dd-wide{ position: static; } :root:has(.wt-s, .wt-chrome) #page-container .dd-wide .dd-menu{ top: calc(100% - 8px); } :root:has(.wt-s, .wt-chrome) #page-container .dd-mega{ display: grid; grid-template-columns: 1fr 1fr 220px; gap: 6px; width: 760px; } :root:has(.wt-s, .wt-chrome) #page-container .dd-list{ width: 280px; } :root:has(.wt-s, .wt-chrome) #page-container .dd-col{ display: flex; flex-direction: column; gap: 2px; padding: 6px; } :root:has(.wt-s, .wt-chrome) #page-container .dd-label{ color: var(--dim); font-size: 0.62rem; padding: 6px 10px 8px; } :root:has(.wt-s, .wt-chrome) #page-container .dd-item{ display: flex !important; gap: 12px; align-items: flex-start; padding: 10px !important; border-radius: 12px !important; color: var(--text) !important; background: none !important; } :root:has(.wt-s, .wt-chrome) #page-container .dd-item:hover{ background: rgba(255, 255, 255, 0.05) !important; } :root:has(.wt-s, .wt-chrome) #page-container .dd-item b{ display: block; font-weight: 600; font-size: 0.9rem; } :root:has(.wt-s, .wt-chrome) #page-container .dd-item small{ display: block; color: var(--muted); font-size: 0.78rem; line-height: 1.35; } :root:has(.wt-s, .wt-chrome) #page-container .dd-ic{ flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: rgba(255, 45, 45, 0.12); color: var(--red); border: 1px solid rgba(255, 45, 45, 0.25); } :root:has(.wt-s, .wt-chrome) #page-container .dd-ic svg, :root:has(.wt-s, .wt-chrome) #page-container .dd-ic .ico{ width: 17px; height: 17px; } :root:has(.wt-s, .wt-chrome) #page-container .dd-feature{ position: relative; display: flex !important; flex-direction: column; justify-content: flex-end; gap: 4px; border-radius: 14px !important; overflow: hidden; padding: 16px !important; min-height: 220px; color: #fff !important; background: none !important; } :root:has(.wt-s, .wt-chrome) #page-container .dd-feature-img{ position: absolute; inset: 0; background: center / cover; transition: transform 0.8s var(--ease); } :root:has(.wt-s, .wt-chrome) #page-container .dd-feature::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(0, 0, 0, 0.85)); } :root:has(.wt-s, .wt-chrome) #page-container .dd-feature:hover .dd-feature-img{ transform: scale(1.06); } :root:has(.wt-s, .wt-chrome) #page-container .dd-feature > *:not(.dd-feature-img), :root:has(.wt-s, .wt-chrome) #page-container .dd-feature > .et_pb_text_inner > *:not(.dd-feature-img){ position: relative; z-index: 1; } :root:has(.wt-s, .wt-chrome) #page-container .dd-feature .mono{ color: #ff8f88; font-size: 0.6rem; } :root:has(.wt-s, .wt-chrome) #page-container .dd-feature b{ font-family: var(--f-display); font-size: 1.05rem; letter-spacing: -0.02em; line-height: 1.2; } :root:has(.wt-s, .wt-chrome) #page-container .nav-links a[aria-current="page"]{ color: var(--text); background: rgba(255, 255, 255, 0.06); } :root:has(.wt-s, .wt-chrome) #page-container .nav-signin{ font-size: 0.9rem; color: var(--muted); transition: color 0.25s; } :root:has(.wt-s, .wt-chrome) #page-container .nav-signin:hover{ color: var(--text); } :root:has(.wt-s, .wt-chrome) #page-container .mm-sub{ display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; } :root:has(.wt-s, .wt-chrome) #page-container .mm-sub a{ padding: 8px 14px; border: 1px solid var(--line-2); border-radius: 99px; font-size: 0.85rem; color: var(--muted); } :root:has(.wt-s, .wt-chrome) #page-container .mm-ctas{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } :root:has(.wt-s, .wt-chrome) #page-container .mobile-menu{ overflow-y: auto; } :root:has(.wt-s, .wt-chrome) #page-container .mobile-menu nav a{ font-size: clamp(1.7rem, 7.5vw, 2.6rem); padding: 8px 0; } :root:has(.wt-s, .wt-chrome) #page-container .vmodal{ position: fixed; inset: 0; z-index: 170; display: grid; place-items: center; padding: var(--gutter); visibility: hidden; } :root:has(.wt-s, .wt-chrome) #page-container .vmodal.is-open{ visibility: visible; } :root:has(.wt-s, .wt-chrome) #page-container .vmodal-backdrop{ position: absolute; inset: 0; background: rgba(4, 4, 6, 0.86); backdrop-filter: blur(10px); opacity: 0; transition: opacity 0.4s; } :root:has(.wt-s, .wt-chrome) #page-container .vmodal.is-open .vmodal-backdrop{ opacity: 1; } :root:has(.wt-s, .wt-chrome) #page-container .vmodal-box{ position: relative; width: min(1100px, 100%); border-radius: 18px; overflow: hidden; border: 1px solid var(--line-2); background: #000; box-shadow: 0 40px 120px -20px rgba(255, 45, 45, 0.35); transform: translateY(30px) scale(0.96); opacity: 0; transition: transform 0.6s var(--ease), opacity 0.4s; } :root:has(.wt-s, .wt-chrome) #page-container .vmodal.is-open .vmodal-box{ transform: none; opacity: 1; } :root:has(.wt-s, .wt-chrome) #page-container .vmodal-bar{ display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; color: var(--muted); border-bottom: 1px solid var(--line); background: var(--surface); } :root:has(.wt-s, .wt-chrome) #page-container .vmodal-bar span{ display: flex; align-items: center; gap: 8px; } :root:has(.wt-s, .wt-chrome) #page-container .vmodal-title{ color: var(--text); font-weight: 500; } :root:has(.wt-s, .wt-chrome) #page-container .vmodal-close{ font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.08em; color: var(--muted); padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line-2); } :root:has(.wt-s, .wt-chrome) #page-container .vmodal-close:hover{ color: #fff; border-color: var(--red); } :root:has(.wt-s, .wt-chrome) #page-container .vmodal-frame{ aspect-ratio: 16 / 9; background: #000; } :root:has(.wt-s, .wt-chrome) #page-container .vmodal-frame iframe{ width: 100%; height: 100%; border: 0; display: block; } :root:has(.wt-s, .wt-chrome) #page-container .field{ display: flex; flex-direction: column; gap: 8px; } :root:has(.wt-s, .wt-chrome) #page-container .field label, :root:has(.wt-s, .wt-chrome) #page-container .field .lbl{ font-size: 0.82rem; font-weight: 500; color: #c9c8ce; } :root:has(.wt-s, .wt-chrome) #page-container .field label small{ color: var(--dim); font-weight: 400; } :root:has(.wt-s, .wt-chrome) #page-container .input, :root:has(.wt-s, .wt-chrome) #page-container .field input, :root:has(.wt-s, .wt-chrome) #page-container .field select, :root:has(.wt-s, .wt-chrome) #page-container .field textarea{ width: 100%; font: inherit; color: var(--text); background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 12px; padding: 14px 16px; outline: none; transition: border-color 0.25s, box-shadow 0.25s, background 0.25s; } :root:has(.wt-s, .wt-chrome) #page-container .field textarea{ min-height: 140px; resize: vertical; } :root:has(.wt-s, .wt-chrome) #page-container .field select{ appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238d8c93' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; padding-right: 40px; } :root:has(.wt-s, .wt-chrome) #page-container .input:focus, :root:has(.wt-s, .wt-chrome) #page-container .field input:focus, :root:has(.wt-s, .wt-chrome) #page-container .field select:focus, :root:has(.wt-s, .wt-chrome) #page-container .field textarea:focus{ border-color: rgba(255, 60, 50, 0.7); box-shadow: 0 0 0 4px rgba(255, 45, 45, 0.12); background: #121216; } :root:has(.wt-s, .wt-chrome) #page-container .field input::placeholder, :root:has(.wt-s, .wt-chrome) #page-container .field textarea::placeholder{ color: var(--dim); } :root:has(.wt-s, .wt-chrome) #page-container .fgrid{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } :root:has(.wt-s, .wt-chrome) #page-container .fgrid .full{ grid-column: 1 / -1; } :root:has(.wt-s, .wt-chrome) #page-container .form-msg{ font-size: 0.88rem; color: #3ddc97; min-height: 0; } :root:has(.wt-s, .wt-chrome) #page-container .form-msg:empty{ display: none; } :root:has(.wt-s, .wt-chrome) #page-container .pills{ display: flex; flex-wrap: wrap; gap: 8px; } :root:has(.wt-s, .wt-chrome) #page-container .pill, :root:has(.wt-s, .wt-chrome) #page-container .choice{ position: relative; } :root:has(.wt-s, .wt-chrome) #page-container .pill input, :root:has(.wt-s, .wt-chrome) #page-container .choice input{ position: absolute; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; } :root:has(.wt-s, .wt-chrome) #page-container .pill span{ display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 99px; cursor: pointer; border: 1px solid var(--line-2); background: var(--bg-2); font-size: 0.88rem; color: #c9c8ce; transition: all 0.25s; } :root:has(.wt-s, .wt-chrome) #page-container .pill span:hover{ border-color: rgba(255, 255, 255, 0.3); } :root:has(.wt-s, .wt-chrome) #page-container .pill input:checked + span{ background: rgba(255, 45, 45, 0.14); border-color: var(--red); color: #fff; } :root:has(.wt-s, .wt-chrome) #page-container .pill input:focus-visible + span{ box-shadow: 0 0 0 3px rgba(255, 45, 45, 0.3); } :root:has(.wt-s, .wt-chrome) #page-container .check{ display: flex; align-items: center; gap: 10px; font-size: 0.88rem; color: var(--muted); cursor: pointer; } :root:has(.wt-s, .wt-chrome) #page-container .check input{ width: 18px; height: 18px; accent-color: var(--red); } :root:has(.wt-s, .wt-chrome) #page-container .form-success{ display: none; text-align: center; padding: 30px 10px; } :root:has(.wt-s, .wt-chrome) #page-container .is-sent .form-success{ display: block; } :root:has(.wt-s, .wt-chrome) #page-container .is-sent .form-fields{ display: none; } :root:has(.wt-s, .wt-chrome) #page-container .success-ic{ width: 72px; height: 72px; margin: 0 auto 20px; border-radius: 50%; display: grid; place-items: center; background: rgba(61, 220, 151, 0.12); border: 1px solid rgba(61, 220, 151, 0.4); color: #3ddc97; font-size: 1.8rem; box-shadow: 0 0 40px rgba(61, 220, 151, 0.2); } :root:has(.wt-s, .wt-chrome) #page-container .form-success h3{ font-family: var(--f-display); font-weight: 600; font-size: 1.8rem; letter-spacing: -0.03em; margin-bottom: 8px; } :root:has(.wt-s, .wt-chrome) #page-container .form-success p{ color: var(--muted); max-width: 40ch; margin: 0 auto 22px; } :root:has(.wt-s, .wt-chrome) #page-container .f-news{ margin: 0 0 22px; max-width: 380px; } :root:has(.wt-s, .wt-chrome) #page-container .f-news label{ display: block; color: var(--dim); margin-bottom: 8px; } :root:has(.wt-s, .wt-chrome) #page-container .f-news-row{ display: flex; gap: 8px; padding: 5px; border: 1px solid var(--line-2); border-radius: 99px; background: var(--bg-2); } :root:has(.wt-s, .wt-chrome) #page-container .f-news-row input{ flex: 1; min-width: 0; background: none; border: 0; outline: none; color: var(--text); font: inherit; font-size: 0.9rem; padding: 0 12px; } :root:has(.wt-s, .wt-chrome) #page-container .f-news .form-msg{ margin-top: 8px; } :root:has(.wt-s, .wt-chrome) #page-container .phero{ position: relative; padding: clamp(150px, 20vh, 200px) 0 clamp(60px, 8vw, 100px); overflow: hidden; } :root:has(.wt-s, .wt-chrome) #page-container .phero .hero-bg{ z-index: -1; } :root:has(.wt-s, .wt-chrome) #page-container .phero .grid-bg{ -webkit-mask: radial-gradient(ellipse 70% 80% at 50% 20%, #000 20%, transparent 75%); mask: radial-gradient(ellipse 70% 80% at 50% 20%, #000 20%, transparent 75%); } :root:has(.wt-s, .wt-chrome) #page-container .phero .glow-1{ top: -10%; opacity: 0.8; } :root:has(.wt-s, .wt-chrome) #page-container .crumbs{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--muted); } :root:has(.wt-s, .wt-chrome) #page-container .crumbs a{ color: var(--muted); transition: color 0.2s; } :root:has(.wt-s, .wt-chrome) #page-container .crumbs a:hover{ color: var(--text); } :root:has(.wt-s, .wt-chrome) #page-container .crumbs i{ width: 4px; height: 4px; border-radius: 50%; background: var(--dim); } :root:has(.wt-s, .wt-chrome) #page-container .crumbs b{ color: var(--red); font-weight: 500; } :root:has(.wt-s, .wt-chrome) #page-container .phero-title{ font-family: var(--f-display); font-weight: 650; font-variation-settings: "opsz" 96; font-size: clamp(2.6rem, 7vw, 6.2rem); line-height: 0.95; letter-spacing: -0.05em; margin: 22px 0 22px; max-width: 15ch; } :root:has(.wt-s, .wt-chrome) #page-container .phero-title em{ font-style: italic; font-weight: 500; background: linear-gradient(100deg, #ff6a3d 0%, var(--red) 45%, #ff3d6e 100%); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: 0.06em; } :root:has(.wt-s, .wt-chrome) #page-container .phero-sub{ color: var(--muted); font-size: clamp(1rem, 1.35vw, 1.18rem); max-width: 58ch; } :root:has(.wt-s, .wt-chrome) #page-container .phero-sub b{ color: var(--text); font-weight: 600; } :root:has(.wt-s, .wt-chrome) #page-container .phero .hero-ctas{ justify-content: flex-start; margin-top: 32px; } :root:has(.wt-s, .wt-chrome) #page-container .phero-grid{ display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(32px, 5vw, 72px); align-items: center; } :root:has(.wt-s, .wt-chrome) #page-container .phero-center{ text-align: center; display: flex; flex-direction: column; align-items: center; } :root:has(.wt-s, .wt-chrome) #page-container .phero-center .phero-title{ margin-left: auto; margin-right: auto; max-width: 18ch; } :root:has(.wt-s, .wt-chrome) #page-container .phero-center .hero-ctas{ justify-content: center; } :root:has(.wt-s, .wt-chrome) #page-container .phero-stamp{ position: absolute; right: var(--gutter); top: 130px; color: var(--dim); text-align: right; line-height: 1.8; } :root:has(.wt-s, .wt-chrome) #page-container .phero-stamp b{ color: var(--red); font-weight: 500; } :root:has(.wt-s, .wt-chrome) #page-container .frame{ position: relative; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line-2); background: #111; box-shadow: 0 40px 100px -30px rgba(255, 45, 45, 0.3), 0 30px 60px -20px rgba(0, 0, 0, 0.7); } :root:has(.wt-s, .wt-chrome) #page-container .frame img{ width: 100%; height: 100%; object-fit: cover; } :root:has(.wt-s, .wt-chrome) #page-container .frame::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.2), transparent 30%, transparent 60%, rgba(0, 0, 0, 0.6)); pointer-events: none; } :root:has(.wt-s, .wt-chrome) #page-container .frame-bar{ position: absolute; z-index: 2; top: 14px; left: 14px; right: 14px; display: flex; justify-content: space-between; color: rgba(255, 255, 255, 0.85); font-size: 0.62rem; } :root:has(.wt-s, .wt-chrome) #page-container .frame-bar span{ white-space: nowrap; display: flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 8px; background: rgba(0, 0, 0, 0.45); backdrop-filter: blur(8px); } :root:has(.wt-s, .wt-chrome) #page-container .frame-safe{ position: absolute; z-index: 1; inset: 10%; border: 1px dashed rgba(255, 255, 255, 0.25); border-radius: 6px; pointer-events: none; } :root:has(.wt-s, .wt-chrome) #page-container .frame-play{ position: absolute; z-index: 2; left: 50%; top: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%; display: grid; place-items: center; background: var(--red); color: #fff; font-size: 22px; padding-left: 4px; box-shadow: 0 0 0 10px rgba(255, 45, 45, 0.18), 0 20px 50px -10px var(--red-glow); transition: transform 0.5s var(--ease); } :root:has(.wt-s, .wt-chrome) #page-container .frame-play::before{ content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 1px solid rgba(255, 45, 45, 0.6); animation: ping 2s ease-out infinite; } @keyframes ping{ from { transform: scale(0.9); opacity: 1; } to { transform: scale(1.5); opacity: 0; } } :root:has(.wt-s, .wt-chrome) #page-container [data-video]{ cursor: pointer; } :root:has(.wt-s, .wt-chrome) #page-container [data-video]:hover .frame-play{ transform: scale(1.08); } :root:has(.wt-s, .wt-chrome) #page-container .frame-tl{ position: absolute; z-index: 2; left: 14px; right: 14px; bottom: 14px; height: 30px; border-radius: 8px; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(8px); display: flex; align-items: center; gap: 3px; padding: 6px; } :root:has(.wt-s, .wt-chrome) #page-container .frame-tl i{ height: 100%; border-radius: 3px; background: linear-gradient(180deg, #d82a2a, #8a1218); flex: var(--f, 1); } :root:has(.wt-s, .wt-chrome) #page-container .frame-tl i:nth-child(even){ background: linear-gradient(180deg, #ff7a3d, #a13d14); } :root:has(.wt-s, .wt-chrome) #page-container .frame-tl::after{ content: ""; position: absolute; top: -4px; bottom: -4px; left: 0; width: 2px; background: #fff; box-shadow: 0 0 8px #fff; animation: tlhead 6s linear infinite; } @keyframes tlhead{ from { left: 6px; } to { left: calc(100% - 8px); } } :root:has(.wt-s, .wt-chrome) #page-container .float-tag{ position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 12px; font-size: 0.82rem; font-weight: 500; background: rgba(22, 22, 27, 0.82); border: 1px solid var(--line-2); backdrop-filter: blur(12px); box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.7); white-space: nowrap; } :root:has(.wt-s, .wt-chrome) #page-container .float-tag i{ width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; font-style: normal; font-size: 11px; background: rgba(255, 45, 45, 0.18); color: var(--red); } :root:has(.wt-s, .wt-chrome) #page-container .float-tag i.g{ background: rgba(61, 220, 151, 0.18); color: #3ddc97; } :root:has(.wt-s, .wt-chrome) #page-container .float-tag i.y{ background: rgba(255, 178, 61, 0.18); color: #ffb23d; } :root:has(.wt-s, .wt-chrome) #page-container .hero-visual{ position: relative; } :root:has(.wt-s, .wt-chrome) #page-container .hero-visual .frame{ aspect-ratio: 4 / 3.4; } :root:has(.wt-s, .wt-chrome) #page-container .hero-visual .ft-1{ left: -24px; top: 12%; } :root:has(.wt-s, .wt-chrome) #page-container .hero-visual .ft-2{ right: -18px; top: 46%; } :root:has(.wt-s, .wt-chrome) #page-container .hero-visual .ft-3{ left: 8%; bottom: -18px; } :root:has(.wt-s, .wt-chrome) #page-container .morph{ position: relative; height: 460px; display: grid; place-items: center; } :root:has(.wt-s, .wt-chrome) #page-container .morph-frame{ position: relative; border-radius: 22px; overflow: hidden; border: 1px solid var(--line-2); box-shadow: 0 40px 100px -30px rgba(255, 45, 45, 0.35); background: #111 center / cover; animation: morph 7s var(--ease) infinite; } :root:has(.wt-s, .wt-chrome) #page-container .morph-frame::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, 0.7)); } @keyframes morph{ 0%, 38% { width: min(100%, 520px); height: 292px; } 50%, 88% { width: 230px; height: 410px; } 100% { width: min(100%, 520px); height: 292px; } } :root:has(.wt-s, .wt-chrome) #page-container .morph-label{ position: absolute; z-index: 2; left: 16px; bottom: 14px; display: flex; gap: 8px; } :root:has(.wt-s, .wt-chrome) #page-container .morph-label span{ font-family: var(--f-mono); font-size: 0.62rem; padding: 5px 9px; border-radius: 7px; background: rgba(0, 0, 0, 0.55); border: 1px solid rgba(255, 255, 255, 0.18); } :root:has(.wt-s, .wt-chrome) #page-container .morph-label .r1{ animation: lbl1 7s infinite; } :root:has(.wt-s, .wt-chrome) #page-container .morph-label .r2{ animation: lbl2 7s infinite; } @keyframes lbl1{ 0%, 40% { background: var(--red); border-color: var(--red); } 50%, 88% { background: rgba(0, 0, 0, 0.55); border-color: rgba(255, 255, 255, 0.18); } 100% { background: var(--red); } } @keyframes lbl2{ 0%, 40% { background: rgba(0, 0, 0, 0.55); } 50%, 88% { background: var(--red); border-color: var(--red); } 100% { background: rgba(0, 0, 0, 0.55); } } :root:has(.wt-s, .wt-chrome) #page-container .morph-corner{ position: absolute; width: 22px; height: 22px; border-color: var(--red); border-style: solid; border-width: 0; z-index: 3; } :root:has(.wt-s, .wt-chrome) #page-container .morph-corner.tl{ top: 8px; left: 8px; border-top-width: 2px; border-left-width: 2px; } :root:has(.wt-s, .wt-chrome) #page-container .morph-corner.tr{ top: 8px; right: 8px; border-top-width: 2px; border-right-width: 2px; } :root:has(.wt-s, .wt-chrome) #page-container .morph-corner.bl{ bottom: 8px; left: 8px; border-bottom-width: 2px; border-left-width: 2px; } :root:has(.wt-s, .wt-chrome) #page-container .morph-corner.br{ bottom: 8px; right: 8px; border-bottom-width: 2px; border-right-width: 2px; } :root:has(.wt-s, .wt-chrome) #page-container .duo{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 88px); align-items: center; } :root:has(.wt-s, .wt-chrome) #page-container .duo.rev > .et_pb_text_inner > :first-child, :root:has(.wt-s, .wt-chrome) #page-container .duo.rev > :first-child{ order: 2; } :root:has(.wt-s, .wt-chrome) #page-container .duo .frame{ aspect-ratio: 5 / 4; } :root:has(.wt-s, .wt-chrome) #page-container .duo h2, :root:has(.wt-s, .wt-chrome) #page-container .h2{ font-family: var(--f-display); font-weight: 600; font-size: clamp(2rem, 4vw, 3.3rem); line-height: 1; letter-spacing: -0.045em; margin: 16px 0 18px; } :root:has(.wt-s, .wt-chrome) #page-container .duo h2 em, :root:has(.wt-s, .wt-chrome) #page-container .h2 em{ font-style: italic; font-weight: 500; color: var(--red); } :root:has(.wt-s, .wt-chrome) #page-container .lead{ color: #b5b4ba; font-size: 1.05rem; margin-bottom: 14px; max-width: 56ch; } :root:has(.wt-s, .wt-chrome) #page-container .tagline{ font-family: var(--f-display); font-size: 1.3rem; letter-spacing: -0.02em; color: var(--text); margin-bottom: 14px; } :root:has(.wt-s, .wt-chrome) #page-container .ticks{ list-style: none; display: grid; gap: 10px; margin: 18px 0; } :root:has(.wt-s, .wt-chrome) #page-container .ticks.two{ grid-template-columns: 1fr 1fr; } :root:has(.wt-s, .wt-chrome) #page-container .ticks li{ display: flex; gap: 10px; color: #c9c8ce; font-size: 0.95rem; line-height: 1.45; } :root:has(.wt-s, .wt-chrome) #page-container .ticks li::before{ content: ""; flex: none; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; background: rgba(255, 45, 45, 0.15) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff4a42' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center / 11px no-repeat; } :root:has(.wt-s, .wt-chrome) #page-container .mini-label{ display: block; font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); margin: 22px 0 4px; } :root:has(.wt-s, .wt-chrome) #page-container .btn-row{ display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; } :root:has(.wt-s, .wt-chrome) #page-container .cards{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } :root:has(.wt-s, .wt-chrome) #page-container .cards.c2{ grid-template-columns: repeat(2, 1fr); } :root:has(.wt-s, .wt-chrome) #page-container .cards.c4{ grid-template-columns: repeat(4, 1fr); } :root:has(.wt-s, .wt-chrome) #page-container .card{ position: relative; border-radius: var(--r-lg); border: 1px solid var(--line); background: linear-gradient(180deg, var(--surface), var(--bg-2)); padding: 28px; display: flex; flex-direction: column; gap: 10px; overflow: hidden; transition: border-color 0.4s, transform 0.5s var(--ease); } :root:has(.wt-s, .wt-chrome) #page-container a.card:hover, :root:has(.wt-s, .wt-chrome) #page-container .card.hov:hover{ border-color: rgba(255, 60, 50, 0.4); transform: translateY(-4px); } :root:has(.wt-s, .wt-chrome) #page-container .card h3{ font-family: var(--f-display); font-weight: 600; font-size: 1.3rem; letter-spacing: -0.025em; line-height: 1.15; } :root:has(.wt-s, .wt-chrome) #page-container .card p{ color: var(--muted); font-size: 0.94rem; } :root:has(.wt-s, .wt-chrome) #page-container .card .num{ font-family: var(--f-display); font-weight: 600; font-size: 2.6rem; letter-spacing: -0.05em; line-height: 1; color: var(--dim); } :root:has(.wt-s, .wt-chrome) #page-container .card .link-arrow{ margin-top: auto; padding-top: 10px; } :root:has(.wt-s, .wt-chrome) #page-container .card-ic{ width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: rgba(255, 45, 45, 0.12); color: var(--red); border: 1px solid rgba(255, 45, 45, 0.25); margin-bottom: 8px; } :root:has(.wt-s, .wt-chrome) #page-container .card-ic .ico, :root:has(.wt-s, .wt-chrome) #page-container .card-ic svg{ width: 21px; height: 21px; } :root:has(.wt-s, .wt-chrome) #page-container .card-img{ margin: -28px -28px 14px; aspect-ratio: 16 / 9; overflow: hidden; } :root:has(.wt-s, .wt-chrome) #page-container .card-img img{ width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); } :root:has(.wt-s, .wt-chrome) #page-container a.card:hover .card-img img{ transform: scale(1.05); } :root:has(.wt-s, .wt-chrome) #page-container .tint{ background: var(--bg-2); } :root:has(.wt-s, .wt-chrome) #page-container .band{ display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--line); gap: 1px; } :root:has(.wt-s, .wt-chrome) #page-container .band > div, :root:has(.wt-s, .wt-chrome) #page-container .band > .et_pb_text_inner > div{ background: var(--bg); padding: 30px 26px; } :root:has(.wt-s, .wt-chrome) #page-container .band b{ display: block; font-family: var(--f-display); font-weight: 600; font-size: clamp(2.4rem, 4.5vw, 3.6rem); letter-spacing: -0.05em; line-height: 1; margin-bottom: 10px; } :root:has(.wt-s, .wt-chrome) #page-container .band > .et_pb_text_inner > div:first-child b, :root:has(.wt-s, .wt-chrome) #page-container .band > div:first-child b{ color: var(--red); } :root:has(.wt-s, .wt-chrome) #page-container .band p{ color: var(--muted); font-size: 0.92rem; } :root:has(.wt-s, .wt-chrome) #page-container .statement{ font-family: var(--f-display); font-weight: 600; font-size: clamp(1.8rem, 4.2vw, 3.6rem); line-height: 1.12; letter-spacing: -0.04em; max-width: 24ch; } :root:has(.wt-s, .wt-chrome) #page-container .statement .sw{ opacity: 0.16; transition: opacity 0.2s; } :root:has(.wt-s, .wt-chrome) #page-container .statement em{ font-style: italic; font-weight: 500; color: var(--red); } :root:has(.wt-s, .wt-chrome) #page-container .matrix{ border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--bg-2); } :root:has(.wt-s, .wt-chrome) #page-container .mx-row{ display: grid; grid-template-columns: 1.1fr 1.3fr 0.6fr; align-items: center; border-bottom: 1px solid var(--line); transition: background 0.3s; } :root:has(.wt-s, .wt-chrome) #page-container .mx-row:last-child{ border-bottom: 0; } :root:has(.wt-s, .wt-chrome) #page-container .mx-row:not(.mx-head):hover{ background: rgba(255, 45, 45, 0.04); } :root:has(.wt-s, .wt-chrome) #page-container .mx-row > .et_pb_text_inner > span, :root:has(.wt-s, .wt-chrome) #page-container .mx-row > span{ padding: 20px 24px; font-size: 0.98rem; } :root:has(.wt-s, .wt-chrome) #page-container .mx-row > span:first-child, :root:has(.wt-s, .wt-chrome) #page-container .mx-row > .et_pb_text_inner > span:first-child{ font-weight: 600; } :root:has(.wt-s, .wt-chrome) #page-container .mx-row > span:nth-child(2), :root:has(.wt-s, .wt-chrome) #page-container .mx-row > .et_pb_text_inner > span:nth-child(2){ color: #c9c8ce; } :root:has(.wt-s, .wt-chrome) #page-container .mx-head > span, :root:has(.wt-s, .wt-chrome) #page-container .mx-head > .et_pb_text_inner > span{ font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim) !important; font-weight: 500 !important; padding-top: 16px; padding-bottom: 16px; background: var(--surface); } :root:has(.wt-s, .wt-chrome) #page-container .tpill{ display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-mono); font-size: 0.72rem; padding: 6px 10px; border-radius: 99px; background: rgba(255, 45, 45, 0.12); color: #ff8f88; border: 1px solid rgba(255, 45, 45, 0.3); white-space: nowrap; } :root:has(.wt-s, .wt-chrome) #page-container .tpill::before{ content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--red); box-shadow: 0 0 6px var(--red); } :root:has(.wt-s, .wt-chrome) #page-container .pains{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } :root:has(.wt-s, .wt-chrome) #page-container .pain{ border-radius: var(--r-lg); border: 1px solid var(--line); overflow: hidden; background: var(--bg-2); display: flex; flex-direction: column; } :root:has(.wt-s, .wt-chrome) #page-container .pain-q, :root:has(.wt-s, .wt-chrome) #page-container .pain-a{ padding: 24px 26px; } :root:has(.wt-s, .wt-chrome) #page-container .pain-q{ border-bottom: 1px dashed var(--line-2); } :root:has(.wt-s, .wt-chrome) #page-container .pain-q .mono, :root:has(.wt-s, .wt-chrome) #page-container .pain-a .mono{ display: block; margin-bottom: 10px; } :root:has(.wt-s, .wt-chrome) #page-container .pain-q .mono{ color: var(--dim); } :root:has(.wt-s, .wt-chrome) #page-container .pain-q p{ color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(255, 45, 45, 0.6); font-size: 1rem; } :root:has(.wt-s, .wt-chrome) #page-container .pain-a{ background: linear-gradient(180deg, rgba(255, 45, 45, 0.07), transparent); flex: 1; } :root:has(.wt-s, .wt-chrome) #page-container .pain-a .mono{ color: var(--red); } :root:has(.wt-s, .wt-chrome) #page-container .pain-a p{ color: var(--text); font-weight: 500; } :root:has(.wt-s, .wt-chrome) #page-container .versus{ border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; } :root:has(.wt-s, .wt-chrome) #page-container .vs-row{ display: grid; grid-template-columns: 0.8fr 1fr 1fr; border-bottom: 1px solid var(--line); } :root:has(.wt-s, .wt-chrome) #page-container .vs-row:last-child{ border-bottom: 0; } :root:has(.wt-s, .wt-chrome) #page-container .vs-row > .et_pb_text_inner > span, :root:has(.wt-s, .wt-chrome) #page-container .vs-row > span{ padding: 18px 22px; font-size: 0.95rem; color: #c9c8ce; } :root:has(.wt-s, .wt-chrome) #page-container .vs-row > span:first-child, :root:has(.wt-s, .wt-chrome) #page-container .vs-row > .et_pb_text_inner > span:first-child{ color: var(--muted); font-size: 0.85rem; font-family: var(--f-mono); letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.7rem; display: flex; align-items: center; } :root:has(.wt-s, .wt-chrome) #page-container .vs-row > .et_pb_text_inner > span:nth-child(2), :root:has(.wt-s, .wt-chrome) #page-container .vs-row > span:nth-child(2){ background: rgba(255, 255, 255, 0.015); } :root:has(.wt-s, .wt-chrome) #page-container .vs-head > span, :root:has(.wt-s, .wt-chrome) #page-container .vs-head > .et_pb_text_inner > span{ font-family: var(--f-display) !important; font-size: 1.25rem !important; letter-spacing: -0.02em !important; text-transform: none !important; color: var(--text) !important; font-weight: 600; padding-top: 24px; padding-bottom: 24px; } :root:has(.wt-s, .wt-chrome) #page-container .vs-head > .et_pb_text_inner > span:nth-child(3), :root:has(.wt-s, .wt-chrome) #page-container .vs-head > span:nth-child(3){ background: rgba(255, 45, 45, 0.08); } :root:has(.wt-s, .wt-chrome) #page-container .vs-row > span:nth-child(3), :root:has(.wt-s, .wt-chrome) #page-container .vs-row > .et_pb_text_inner > span:nth-child(3){ background: rgba(255, 45, 45, 0.04); } :root:has(.wt-s, .wt-chrome) #page-container .vs-head small{ display: block; font-family: var(--f-mono); font-size: 0.62rem; color: var(--red); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 400; margin-top: 4px; } :root:has(.wt-s, .wt-chrome) #page-container .pillar{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; padding: clamp(28px, 4vw, 48px); border-radius: 32px; border: 1px solid var(--line); background: linear-gradient(160deg, var(--surface), var(--bg-2) 60%); margin-bottom: 20px; overflow: hidden; position: relative; } :root:has(.wt-s, .wt-chrome) #page-container .pillar::before{ content: ""; position: absolute; right: -10%; top: -30%; width: 60%; height: 120%; background: radial-gradient(closest-side, rgba(255, 45, 45, 0.12), transparent); pointer-events: none; } :root:has(.wt-s, .wt-chrome) #page-container .pillar.rev .pillar-media{ order: 2; } :root:has(.wt-s, .wt-chrome) #page-container .pillar-media{ position: relative; display: grid; place-items: center; min-height: 420px; } :root:has(.wt-s, .wt-chrome) #page-container .pillar-media .frame{ width: 100%; aspect-ratio: 16 / 10; } :root:has(.wt-s, .wt-chrome) #page-container .pillar-media .frame.vert{ width: 260px; aspect-ratio: 9 / 16; } :root:has(.wt-s, .wt-chrome) #page-container .pillar-media .frame.vert.back{ position: absolute; width: 210px; opacity: 0.45; transform: rotate(-9deg) translateX(-150px); filter: blur(1px); } :root:has(.wt-s, .wt-chrome) #page-container .pillar-media .frame.vert.back2{ position: absolute; width: 210px; opacity: 0.45; transform: rotate(9deg) translateX(150px); filter: blur(1px); } :root:has(.wt-s, .wt-chrome) #page-container .pillar-copy .tags{ margin: 18px 0 0; } :root:has(.wt-s, .wt-chrome) #page-container .badge-ratio{ display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 6px 12px; border-radius: 99px; border: 1px solid rgba(255, 45, 45, 0.4); color: #ff8f88; background: rgba(255, 45, 45, 0.08); } :root:has(.wt-s, .wt-chrome) #page-container .hsteps{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; position: relative; } :root:has(.wt-s, .wt-chrome) #page-container .hsteps::before{ content: ""; position: absolute; left: 6%; right: 6%; top: 37px; height: 1px; background: repeating-linear-gradient(90deg, var(--line-2) 0 6px, transparent 6px 12px); } :root:has(.wt-s, .wt-chrome) #page-container .hstep{ position: relative; text-align: center; padding: 0 12px; } :root:has(.wt-s, .wt-chrome) #page-container .hstep-dot{ position: relative; z-index: 1; width: 74px; height: 74px; margin: 0 auto 22px; border-radius: 22px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line-2); color: var(--red); box-shadow: 0 0 0 8px var(--bg); } :root:has(.wt-s, .wt-chrome) #page-container .hstep-dot svg, :root:has(.wt-s, .wt-chrome) #page-container .hstep-dot .ico{ width: 28px; height: 28px; } :root:has(.wt-s, .wt-chrome) #page-container .hstep h3{ font-family: var(--f-display); font-weight: 600; font-size: 1.35rem; letter-spacing: -0.02em; margin-bottom: 6px; } :root:has(.wt-s, .wt-chrome) #page-container .hstep p{ color: var(--muted); font-size: 0.95rem; max-width: 30ch; margin: 0 auto; } :root:has(.wt-s, .wt-chrome) #page-container .hstep .mono{ color: var(--red); display: block; margin-bottom: 6px; } :root:has(.wt-s, .wt-chrome) #page-container .specs{ display: flex; flex-wrap: wrap; gap: 10px; } :root:has(.wt-s, .wt-chrome) #page-container .spec{ display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px 12px 12px; border-radius: 99px; border: 1px solid var(--line-2); background: var(--surface); font-weight: 500; transition: border-color 0.3s, transform 0.4s var(--ease); } :root:has(.wt-s, .wt-chrome) #page-container .spec:hover{ border-color: var(--red); transform: translateY(-2px); } :root:has(.wt-s, .wt-chrome) #page-container .spec i{ width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-style: normal; background: rgba(255, 45, 45, 0.15); color: var(--red); font-size: 0.85rem; } :root:has(.wt-s, .wt-chrome) #page-container .uc-tabs{ position: sticky; top: 92px; z-index: 40; display: flex; justify-content: center; margin: 0 auto 40px; } :root:has(.wt-s, .wt-chrome) #page-container .uc-tabs nav{ display: inline-flex; gap: 4px; padding: 5px; border-radius: 99px; background: rgba(19, 19, 23, 0.85); backdrop-filter: blur(14px); border: 1px solid var(--line-2); box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.8); overflow-x: auto; max-width: 100%; scrollbar-width: none; } :root:has(.wt-s, .wt-chrome) #page-container .uc-tabs a{ padding: 10px 18px; border-radius: 99px; font-size: 0.88rem; font-weight: 500; color: var(--muted); white-space: nowrap; transition: background 0.3s, color 0.3s; } :root:has(.wt-s, .wt-chrome) #page-container .uc-tabs a.is-active{ background: var(--red); color: #fff; } :root:has(.wt-s, .wt-chrome) #page-container .uc{ padding: clamp(64px, 8vw, 110px) 0; border-top: 1px solid var(--line); scroll-margin-top: 140px; } :root:has(.wt-s, .wt-chrome) #page-container .uc .frame{ aspect-ratio: 4 / 3.2; } :root:has(.wt-s, .wt-chrome) #page-container .uc-num{ font-family: var(--f-display); font-weight: 600; font-size: 5rem; letter-spacing: -0.06em; line-height: 0.8; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.25); } :root:has(.wt-s, .wt-chrome) #page-container .uc-cols{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px 28px; } :root:has(.wt-s, .wt-chrome) #page-container .showreel{ position: relative; aspect-ratio: 21 / 9; border-radius: 32px; } :root:has(.wt-s, .wt-chrome) #page-container .showreel .frame-play{ width: 110px; height: 110px; margin: -55px 0 0 -55px; font-size: 28px; } :root:has(.wt-s, .wt-chrome) #page-container .showreel-cap{ position: absolute; z-index: 2; left: 28px; bottom: 60px; } :root:has(.wt-s, .wt-chrome) #page-container .showreel-cap b{ display: block; font-family: var(--f-display); font-size: clamp(1.6rem, 3vw, 2.6rem); letter-spacing: -0.04em; line-height: 1; } :root:has(.wt-s, .wt-chrome) #page-container .showreel-cap .mono{ color: #ff8f88; } :root:has(.wt-s, .wt-chrome) #page-container .filters{ display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; } :root:has(.wt-s, .wt-chrome) #page-container .filter{ padding: 10px 18px; border-radius: 99px; border: 1px solid var(--line-2); background: var(--bg-2); font-size: 0.88rem; color: var(--muted); transition: all 0.3s; } :root:has(.wt-s, .wt-chrome) #page-container .filter:hover{ color: var(--text); border-color: rgba(255, 255, 255, 0.3); } :root:has(.wt-s, .wt-chrome) #page-container .filter.is-on{ background: var(--red); border-color: var(--red); color: #fff; } :root:has(.wt-s, .wt-chrome) #page-container .filter sup{ font-family: var(--f-mono); font-size: 0.6rem; margin-left: 4px; opacity: 0.7; } :root:has(.wt-s, .wt-chrome) #page-container .wgrid{ display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-flow: dense; gap: 16px; } :root:has(.wt-s, .wt-chrome) #page-container .witem{ position: relative; border-radius: 22px; overflow: hidden; border: 1px solid var(--line-2); background: #111; aspect-ratio: 16 / 11; transition: transform 0.6s var(--ease), opacity 0.4s; } :root:has(.wt-s, .wt-chrome) #page-container .witem.tall{ grid-row: span 2; aspect-ratio: auto; } :root:has(.wt-s, .wt-chrome) #page-container .witem img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); } :root:has(.wt-s, .wt-chrome) #page-container .witem::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.3), transparent 35%, transparent 50%, rgba(0, 0, 0, 0.88)); } :root:has(.wt-s, .wt-chrome) #page-container .witem:hover img{ transform: scale(1.06); } :root:has(.wt-s, .wt-chrome) #page-container .witem:hover .reel-play{ opacity: 1; transform: scale(1); } :root:has(.wt-s, .wt-chrome) #page-container .witem .reel-tag{ z-index: 2; } :root:has(.wt-s, .wt-chrome) #page-container .witem-dur{ position: absolute; z-index: 2; top: 16px; right: 16px; font-size: 0.6rem; padding: 5px 9px; border-radius: 7px; background: rgba(0, 0, 0, 0.55); } :root:has(.wt-s, .wt-chrome) #page-container .witem .reel-info{ z-index: 2; } :root:has(.wt-s, .wt-chrome) #page-container .witem.is-hidden{ display: none; } :root:has(.wt-s, .wt-chrome) #page-container .hiw{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 88px); } :root:has(.wt-s, .wt-chrome) #page-container .hiw-steps{ display: flex; flex-direction: column; } :root:has(.wt-s, .wt-chrome) #page-container .hiw-step{ min-height: 70vh; display: flex; flex-direction: column; justify-content: center; padding: 40px 0; opacity: 0.25; transition: opacity 0.5s; } :root:has(.wt-s, .wt-chrome) #page-container .hiw-step.is-active{ opacity: 1; } :root:has(.wt-s, .wt-chrome) #page-container .hiw-step .num{ font-family: var(--f-display); font-weight: 600; font-size: 4.5rem; letter-spacing: -0.06em; line-height: 0.9; color: var(--red); margin-bottom: 16px; } :root:has(.wt-s, .wt-chrome) #page-container .hiw-step h3{ font-family: var(--f-display); font-weight: 600; font-size: clamp(1.8rem, 3vw, 2.6rem); letter-spacing: -0.04em; line-height: 1.05; margin-bottom: 14px; } :root:has(.wt-s, .wt-chrome) #page-container .hiw-step p{ color: var(--muted); font-size: 1.05rem; max-width: 46ch; } :root:has(.wt-s, .wt-chrome) #page-container .hiw-step .ticks{ margin-top: 18px; } :root:has(.wt-s, .wt-chrome) #page-container .hiw-sticky{ position: sticky; top: 120px; height: calc(100vh - 160px); max-height: 640px; display: flex; align-items: center; } :root:has(.wt-s, .wt-chrome) #page-container .app{ width: 100%; border-radius: 22px; border: 1px solid var(--line-2); background: linear-gradient(180deg, #16161b, #0e0e12); overflow: hidden; box-shadow: 0 40px 100px -30px rgba(255, 45, 45, 0.3), 0 30px 60px -20px rgba(0, 0, 0, 0.7); } :root:has(.wt-s, .wt-chrome) #page-container .app-bar{ display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--line); } :root:has(.wt-s, .wt-chrome) #page-container .app-bar .ed-dots{ display: flex; gap: 6px; } :root:has(.wt-s, .wt-chrome) #page-container .app-bar .mono{ color: var(--muted); font-size: 0.62rem; } :root:has(.wt-s, .wt-chrome) #page-container .app-body{ position: relative; height: 420px; } :root:has(.wt-s, .wt-chrome) #page-container .screen-s{ position: absolute; inset: 0; padding: 22px; opacity: 0; transform: translateY(16px); transition: opacity 0.5s, transform 0.6s var(--ease); pointer-events: none; } :root:has(.wt-s, .wt-chrome) #page-container .screen-s.is-active{ opacity: 1; transform: none; } :root:has(.wt-s, .wt-chrome) #page-container .s-title{ font-family: var(--f-display); font-weight: 600; font-size: 1.15rem; letter-spacing: -0.02em; margin-bottom: 14px; display: flex; justify-content: space-between; align-items: center; } :root:has(.wt-s, .wt-chrome) #page-container .s-title small{ font-family: var(--f-mono); font-size: 0.6rem; color: var(--dim); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 400; } :root:has(.wt-s, .wt-chrome) #page-container .s-plans{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } :root:has(.wt-s, .wt-chrome) #page-container .s-plan{ border: 1px solid var(--line-2); border-radius: 14px; padding: 16px; background: var(--bg-2); } :root:has(.wt-s, .wt-chrome) #page-container .s-plan.on{ border-color: var(--red); background: rgba(255, 45, 45, 0.08); box-shadow: 0 0 0 3px rgba(255, 45, 45, 0.12); } :root:has(.wt-s, .wt-chrome) #page-container .s-plan b{ display: block; font-family: var(--f-display); font-size: 1.05rem; } :root:has(.wt-s, .wt-chrome) #page-container .s-plan .p{ font-family: var(--f-display); font-size: 1.6rem; letter-spacing: -0.04em; margin: 6px 0; } :root:has(.wt-s, .wt-chrome) #page-container .s-plan small{ color: var(--muted); font-size: 0.75rem; } :root:has(.wt-s, .wt-chrome) #page-container .s-btn{ margin-top: 14px; height: 42px; border-radius: 99px; background: var(--red); display: grid; place-items: center; font-weight: 600; font-size: 0.9rem; } :root:has(.wt-s, .wt-chrome) #page-container .s-files{ display: flex; flex-direction: column; gap: 10px; } :root:has(.wt-s, .wt-chrome) #page-container .s-file{ display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center; padding: 12px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); } :root:has(.wt-s, .wt-chrome) #page-container .s-file .th{ width: 40px; height: 30px; border-radius: 6px; background: center / cover; } :root:has(.wt-s, .wt-chrome) #page-container .s-file b{ display: block; font-size: 0.85rem; font-weight: 500; } :root:has(.wt-s, .wt-chrome) #page-container .s-file .bar{ height: 4px; border-radius: 4px; background: var(--surface-2); margin-top: 6px; overflow: hidden; } :root:has(.wt-s, .wt-chrome) #page-container .s-file .bar i{ display: block; height: 100%; background: var(--red); width: var(--w, 50%); } :root:has(.wt-s, .wt-chrome) #page-container .screen-s.is-active .s-file .bar i{ animation: fillw 2.2s var(--ease) both; } @keyframes fillw{ from { width: 0; } } :root:has(.wt-s, .wt-chrome) #page-container .s-file small{ font-family: var(--f-mono); font-size: 0.62rem; color: var(--muted); } :root:has(.wt-s, .wt-chrome) #page-container .s-drop{ margin-top: 12px; border: 1.5px dashed var(--line-2); border-radius: 14px; padding: 18px; text-align: center; color: var(--muted); font-size: 0.85rem; } :root:has(.wt-s, .wt-chrome) #page-container .s-drop b{ color: var(--red); } :root:has(.wt-s, .wt-chrome) #page-container .s-review{ display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px; height: calc(100% - 40px); } :root:has(.wt-s, .wt-chrome) #page-container .s-video{ border-radius: 12px; background: center / cover; position: relative; overflow: hidden; } :root:has(.wt-s, .wt-chrome) #page-container .s-video::after{ content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, var(--red) 64%, rgba(255, 255, 255, 0.2) 64%); } :root:has(.wt-s, .wt-chrome) #page-container .s-comments{ display: flex; flex-direction: column; gap: 8px; } :root:has(.wt-s, .wt-chrome) #page-container .s-c{ padding: 10px 12px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); font-size: 0.78rem; color: #c9c8ce; } :root:has(.wt-s, .wt-chrome) #page-container .s-c b{ display: flex; justify-content: space-between; font-size: 0.72rem; margin-bottom: 4px; color: var(--text); } :root:has(.wt-s, .wt-chrome) #page-container .s-c b small{ font-family: var(--f-mono); color: var(--red); font-weight: 400; font-size: 0.6rem; } :root:has(.wt-s, .wt-chrome) #page-container .s-c.done{ border-color: rgba(61, 220, 151, 0.4); } :root:has(.wt-s, .wt-chrome) #page-container .s-c.done b small{ color: #3ddc97; } :root:has(.wt-s, .wt-chrome) #page-container .s-approve{ margin-top: auto; height: 42px; border-radius: 99px; background: #1f9d6b; display: grid; place-items: center; font-weight: 600; font-size: 0.88rem; } :root:has(.wt-s, .wt-chrome) #page-container .screen-s .ed-tracks{ margin-top: 12px; } :root:has(.wt-s, .wt-chrome) #page-container .screen-s .screen{ aspect-ratio: 16 / 7; } :root:has(.wt-s, .wt-chrome) #page-container .week{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; } :root:has(.wt-s, .wt-chrome) #page-container .day{ padding: 28px 24px; border-right: 1px solid var(--line); position: relative; background: var(--bg); } :root:has(.wt-s, .wt-chrome) #page-container .day:last-child{ border-right: 0; } :root:has(.wt-s, .wt-chrome) #page-container .day .mono{ color: var(--red); } :root:has(.wt-s, .wt-chrome) #page-container .day h4{ font-family: var(--f-display); font-weight: 600; font-size: 1.2rem; letter-spacing: -0.02em; margin: 10px 0 8px; line-height: 1.2; } :root:has(.wt-s, .wt-chrome) #page-container .day p{ color: var(--muted); font-size: 0.9rem; } :root:has(.wt-s, .wt-chrome) #page-container .day::after{ content: ""; position: absolute; top: 34px; right: -6px; width: 11px; height: 11px; transform: rotate(45deg); border-top: 1px solid var(--line-2); border-right: 1px solid var(--line-2); background: var(--bg); z-index: 1; } :root:has(.wt-s, .wt-chrome) #page-container .day:last-child::after{ display: none; } :root:has(.wt-s, .wt-chrome) #page-container .queue{ border-radius: var(--r-lg); border: 1px solid var(--line-2); background: #0b0b0e; padding: 18px; box-shadow: 0 30px 80px -30px rgba(255, 45, 45, 0.25); } :root:has(.wt-s, .wt-chrome) #page-container .queue-head{ display: flex; justify-content: space-between; color: var(--muted); margin-bottom: 14px; } :root:has(.wt-s, .wt-chrome) #page-container .q-item{ display: grid; grid-template-columns: 30px 1fr auto; gap: 12px; align-items: center; padding: 13px 14px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); margin-bottom: 8px; } :root:has(.wt-s, .wt-chrome) #page-container .q-item:last-child{ margin-bottom: 0; } :root:has(.wt-s, .wt-chrome) #page-container .q-item .mono{ color: var(--dim); } :root:has(.wt-s, .wt-chrome) #page-container .q-item b{ font-size: 0.92rem; font-weight: 500; } :root:has(.wt-s, .wt-chrome) #page-container .q-item small{ display: block; color: var(--muted); font-size: 0.75rem; } :root:has(.wt-s, .wt-chrome) #page-container .q-st{ font-family: var(--f-mono); font-size: 0.6rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 5px 9px; border-radius: 99px; white-space: nowrap; } :root:has(.wt-s, .wt-chrome) #page-container .q-st.prog{ background: rgba(255, 45, 45, 0.14); color: #ff8f88; } :root:has(.wt-s, .wt-chrome) #page-container .q-st.rev{ background: rgba(255, 178, 61, 0.14); color: #ffb23d; } :root:has(.wt-s, .wt-chrome) #page-container .q-st.done{ background: rgba(61, 220, 151, 0.12); color: #3ddc97; } :root:has(.wt-s, .wt-chrome) #page-container .q-st.wait{ background: rgba(255, 255, 255, 0.06); color: var(--muted); } :root:has(.wt-s, .wt-chrome) #page-container .q-item.is-active{ border-color: rgba(255, 45, 45, 0.45); } :root:has(.wt-s, .wt-chrome) #page-container .ptable{ border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; } :root:has(.wt-s, .wt-chrome) #page-container .pt-row{ display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; border-bottom: 1px solid var(--line); } :root:has(.wt-s, .wt-chrome) #page-container .pt-row > span, :root:has(.wt-s, .wt-chrome) #page-container .pt-row > .et_pb_text_inner > span{ padding: 16px 22px; font-size: 0.93rem; color: #c9c8ce; display: flex; align-items: center; } :root:has(.wt-s, .wt-chrome) #page-container .pt-row > span:not(:first-child), :root:has(.wt-s, .wt-chrome) #page-container .pt-row > .et_pb_text_inner > span:not(:first-child){ justify-content: center; text-align: center; } :root:has(.wt-s, .wt-chrome) #page-container .pt-row > span:nth-child(3), :root:has(.wt-s, .wt-chrome) #page-container .pt-row > .et_pb_text_inner > span:nth-child(3){ background: rgba(255, 45, 45, 0.05); } :root:has(.wt-s, .wt-chrome) #page-container .pt-head{ position: sticky; top: 86px; z-index: 5; background: var(--surface); } :root:has(.wt-s, .wt-chrome) #page-container .pt-head > span, :root:has(.wt-s, .wt-chrome) #page-container .pt-head > .et_pb_text_inner > span{ flex-direction: column; gap: 2px; padding-top: 20px; padding-bottom: 20px; } :root:has(.wt-s, .wt-chrome) #page-container .pt-head b{ font-family: var(--f-display); font-size: 1.2rem; letter-spacing: -0.02em; color: var(--text); } :root:has(.wt-s, .wt-chrome) #page-container .pt-head small{ font-family: var(--f-mono); font-size: 0.62rem; color: var(--muted); } :root:has(.wt-s, .wt-chrome) #page-container .pt-head > span:nth-child(3), :root:has(.wt-s, .wt-chrome) #page-container .pt-head > .et_pb_text_inner > span:nth-child(3){ background: rgba(255, 45, 45, 0.12); } :root:has(.wt-s, .wt-chrome) #page-container .pt-group > span, :root:has(.wt-s, .wt-chrome) #page-container .pt-group > .et_pb_text_inner > span{ grid-column: 1 / -1; background: var(--bg-2); font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--red) !important; padding-top: 12px; padding-bottom: 12px; } :root:has(.wt-s, .wt-chrome) #page-container .pt-row .y{ color: #3ddc97; font-weight: 600; } :root:has(.wt-s, .wt-chrome) #page-container .pt-row .n{ color: var(--dim); } :root:has(.wt-s, .wt-chrome) #page-container .reco{ display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--line-2); border-radius: 32px; overflow: hidden; background: var(--bg-2); } :root:has(.wt-s, .wt-chrome) #page-container .reco-in{ padding: clamp(26px, 4vw, 44px); display: flex; flex-direction: column; gap: 26px; } :root:has(.wt-s, .wt-chrome) #page-container .reco-out{ padding: clamp(26px, 4vw, 44px); background: linear-gradient(160deg, rgba(255, 45, 45, 0.16), rgba(255, 45, 45, 0.03)); border-left: 1px solid var(--line-2); display: flex; flex-direction: column; justify-content: center; gap: 12px; } :root:has(.wt-s, .wt-chrome) #page-container .range-wrap{ display: flex; flex-direction: column; gap: 12px; } :root:has(.wt-s, .wt-chrome) #page-container .range-top{ display: flex; justify-content: space-between; align-items: baseline; } :root:has(.wt-s, .wt-chrome) #page-container .range-top b{ font-family: var(--f-display); font-size: 2.4rem; letter-spacing: -0.05em; line-height: 1; } :root:has(.wt-s, .wt-chrome) #page-container .range-top b small{ font-size: 0.9rem; color: var(--muted); letter-spacing: 0; margin-left: 6px; font-family: var(--f-body); } :root:has(.wt-s, .wt-chrome) #page-container input[type="range"]{ -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--red) var(--p, 30%), var(--surface-2) var(--p, 30%)); outline: none; } :root:has(.wt-s, .wt-chrome) #page-container input[type="range"]::-webkit-slider-thumb{ -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 5px solid var(--red); box-shadow: 0 0 0 6px rgba(255, 45, 45, 0.18); cursor: pointer; } :root:has(.wt-s, .wt-chrome) #page-container input[type="range"]::-moz-range-thumb{ width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 5px solid var(--red); cursor: pointer; } :root:has(.wt-s, .wt-chrome) #page-container .reco-out .mono{ color: #ff8f88; } :root:has(.wt-s, .wt-chrome) #page-container .reco-plan{ font-family: var(--f-display); font-weight: 650; font-size: clamp(3rem, 6vw, 4.6rem); letter-spacing: -0.06em; line-height: 0.9; } :root:has(.wt-s, .wt-chrome) #page-container .reco-why{ color: #c9c8ce; max-width: 38ch; } :root:has(.wt-s, .wt-chrome) #page-container .reco-price{ font-family: var(--f-mono); color: var(--muted); } :root:has(.wt-s, .wt-chrome) #page-container .ptypes{ display: flex; flex-wrap: wrap; gap: 10px; } :root:has(.wt-s, .wt-chrome) #page-container .ptype{ padding: 14px 20px; border-radius: 16px; border: 1px solid var(--line-2); background: var(--surface); } :root:has(.wt-s, .wt-chrome) #page-container .ptype b{ display: block; font-size: 0.95rem; } :root:has(.wt-s, .wt-chrome) #page-container .ptype small{ color: var(--muted); font-size: 0.8rem; } :root:has(.wt-s, .wt-chrome) #page-container .search{ position: relative; width: min(560px, 100%); margin-top: 30px; } :root:has(.wt-s, .wt-chrome) #page-container .search input{ width: 100%; height: 60px; border-radius: 99px; padding: 0 24px 0 54px; font: inherit; font-size: 1rem; color: var(--text); background: rgba(19, 19, 23, 0.85); border: 1px solid var(--line-2); outline: none; backdrop-filter: blur(10px); transition: border-color 0.3s, box-shadow 0.3s; } :root:has(.wt-s, .wt-chrome) #page-container .search input:focus{ border-color: rgba(255, 60, 50, 0.7); box-shadow: 0 0 0 5px rgba(255, 45, 45, 0.12); } :root:has(.wt-s, .wt-chrome) #page-container .search svg, :root:has(.wt-s, .wt-chrome) #page-container .search .ico{ position: absolute; left: 20px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); color: var(--muted); } :root:has(.wt-s, .wt-chrome) #page-container .faq-page{ display: grid; grid-template-columns: 260px 1fr; gap: clamp(32px, 5vw, 72px); align-items: start; } :root:has(.wt-s, .wt-chrome) #page-container .faq-cats{ position: sticky; top: 120px; display: flex; flex-direction: column; gap: 4px; } :root:has(.wt-s, .wt-chrome) #page-container .faq-cats button{ text-align: left; padding: 12px 16px; border-radius: 12px; color: var(--muted); font-size: 0.95rem; display: flex; justify-content: space-between; transition: background 0.25s, color 0.25s; } :root:has(.wt-s, .wt-chrome) #page-container .faq-cats button:hover{ color: var(--text); background: rgba(255, 255, 255, 0.04); } :root:has(.wt-s, .wt-chrome) #page-container .faq-cats button.is-on{ color: #fff; background: var(--surface); box-shadow: inset 2px 0 0 var(--red); } :root:has(.wt-s, .wt-chrome) #page-container .faq-cats sup{ font-family: var(--f-mono); font-size: 0.65rem; color: var(--dim); } :root:has(.wt-s, .wt-chrome) #page-container .acc.is-hidden{ display: none; } :root:has(.wt-s, .wt-chrome) #page-container .faq-empty{ display: none; padding: 40px 0; color: var(--muted); } :root:has(.wt-s, .wt-chrome) #page-container .faq-empty.is-on{ display: block; } :root:has(.wt-s, .wt-chrome) #page-container .acc mark{ background: rgba(255, 45, 45, 0.3); color: #fff; border-radius: 3px; padding: 0 2px; } :root:has(.wt-s, .wt-chrome) #page-container .post-feat{ display: grid; grid-template-columns: 1.2fr 1fr; border-radius: 32px; overflow: hidden; border: 1px solid var(--line-2); background: var(--surface); transition: border-color 0.4s; } :root:has(.wt-s, .wt-chrome) #page-container .post-feat:hover{ border-color: rgba(255, 60, 50, 0.45); } :root:has(.wt-s, .wt-chrome) #page-container .post-feat-img{ position: relative; min-height: 420px; overflow: hidden; } :root:has(.wt-s, .wt-chrome) #page-container .post-feat-img img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); } :root:has(.wt-s, .wt-chrome) #page-container .post-feat:hover .post-feat-img img{ transform: scale(1.05); } :root:has(.wt-s, .wt-chrome) #page-container .post-feat-body{ padding: clamp(28px, 4vw, 48px); display: flex; flex-direction: column; justify-content: center; gap: 16px; } :root:has(.wt-s, .wt-chrome) #page-container .post-feat-body h2{ font-family: var(--f-display); font-weight: 600; font-size: clamp(1.8rem, 3vw, 2.6rem); letter-spacing: -0.04em; line-height: 1.05; } :root:has(.wt-s, .wt-chrome) #page-container .post-feat-body p{ color: var(--muted); } :root:has(.wt-s, .wt-chrome) #page-container .post-meta{ display: flex; align-items: center; gap: 12px; flex-wrap: wrap; color: var(--muted); } :root:has(.wt-s, .wt-chrome) #page-container .post-meta .cat{ color: #ff8f88; padding: 5px 10px; border-radius: 99px; background: rgba(255, 45, 45, 0.1); border: 1px solid rgba(255, 45, 45, 0.3); } :root:has(.wt-s, .wt-chrome) #page-container .posts{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } :root:has(.wt-s, .wt-chrome) #page-container .post{ display: flex; flex-direction: column; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); background: var(--surface); transition: border-color 0.4s, transform 0.5s var(--ease); } :root:has(.wt-s, .wt-chrome) #page-container .post:hover{ border-color: rgba(255, 60, 50, 0.4); transform: translateY(-5px); } :root:has(.wt-s, .wt-chrome) #page-container .post-img{ aspect-ratio: 16 / 10; overflow: hidden; } :root:has(.wt-s, .wt-chrome) #page-container .post-img img{ width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); } :root:has(.wt-s, .wt-chrome) #page-container .post:hover .post-img img{ transform: scale(1.06); } :root:has(.wt-s, .wt-chrome) #page-container .post-body{ padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 12px; flex: 1; } :root:has(.wt-s, .wt-chrome) #page-container .post-body h3{ font-family: var(--f-display); font-weight: 600; font-size: 1.28rem; letter-spacing: -0.025em; line-height: 1.2; } :root:has(.wt-s, .wt-chrome) #page-container .post-body p{ color: var(--muted); font-size: 0.92rem; } :root:has(.wt-s, .wt-chrome) #page-container .post-body .link-arrow{ margin-top: auto; font-size: 0.9rem; } :root:has(.wt-s, .wt-chrome) #page-container .post.is-hidden{ display: none; } :root:has(.wt-s, .wt-chrome) #page-container .newsletter{ display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px; align-items: center; padding: clamp(28px, 5vw, 56px); border-radius: 32px; border: 1px solid var(--line-2); background: radial-gradient(80% 120% at 100% 0%, rgba(255, 45, 45, 0.2), transparent 60%), var(--surface); } :root:has(.wt-s, .wt-chrome) #page-container .newsletter h2{ font-family: var(--f-display); font-weight: 600; font-size: clamp(1.8rem, 3.4vw, 2.8rem); letter-spacing: -0.04em; line-height: 1.05; } :root:has(.wt-s, .wt-chrome) #page-container .newsletter p{ color: var(--muted); margin-top: 10px; } :root:has(.wt-s, .wt-chrome) #page-container .newsletter > *, :root:has(.wt-s, .wt-chrome) #page-container .newsletter > .et_pb_text_inner > *{ min-width: 0; } :root:has(.wt-s, .wt-chrome) #page-container .newsletter .f-news{ max-width: none; margin: 0; } :root:has(.wt-s, .wt-chrome) #page-container .newsletter .f-news-row{ padding: 6px; } :root:has(.wt-s, .wt-chrome) #page-container .newsletter .f-news-row input{ padding: 0 16px; height: 46px; } :root:has(.wt-s, .wt-chrome) #page-container .article-hero{ padding: clamp(140px, 18vh, 180px) 0 40px; } :root:has(.wt-s, .wt-chrome) #page-container .article-hero .phero-title{ font-size: clamp(2.3rem, 5.4vw, 4.6rem); max-width: 20ch; } :root:has(.wt-s, .wt-chrome) #page-container .author{ display: flex; align-items: center; gap: 12px; } :root:has(.wt-s, .wt-chrome) #page-container .author .av{ width: 44px; height: 44px; border-radius: 50%; background: center / cover; border: 2px solid var(--line-2); } :root:has(.wt-s, .wt-chrome) #page-container .author b{ display: block; font-size: 0.92rem; } :root:has(.wt-s, .wt-chrome) #page-container .author small{ color: var(--muted); font-size: 0.82rem; } :root:has(.wt-s, .wt-chrome) #page-container .article-cover{ border-radius: 32px; overflow: hidden; aspect-ratio: 21 / 9; border: 1px solid var(--line-2); } :root:has(.wt-s, .wt-chrome) #page-container .article-cover img{ width: 100%; height: 100%; object-fit: cover; } :root:has(.wt-s, .wt-chrome) #page-container .article-wrap{ display: grid; grid-template-columns: 240px minmax(0, 720px) 1fr; gap: clamp(28px, 4vw, 56px); padding-top: 64px; } :root:has(.wt-s, .wt-chrome) #page-container .toc{ position: sticky; top: 120px; align-self: start; } :root:has(.wt-s, .wt-chrome) #page-container .toc .mono{ color: var(--dim); display: block; margin-bottom: 14px; } :root:has(.wt-s, .wt-chrome) #page-container .toc a{ display: block; padding: 8px 0 8px 14px; font-size: 0.88rem; color: var(--muted); border-left: 1px solid var(--line-2); transition: color 0.25s, border-color 0.25s; line-height: 1.35; } :root:has(.wt-s, .wt-chrome) #page-container .toc a:hover{ color: var(--text); } :root:has(.wt-s, .wt-chrome) #page-container .toc a.is-active{ color: #fff; border-color: var(--red); } :root:has(.wt-s, .wt-chrome) #page-container .share{ display: flex; gap: 8px; margin-top: 26px; } :root:has(.wt-s, .wt-chrome) #page-container .share a{ width: 38px; height: 38px; padding: 0; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-2); color: var(--muted); transition: all 0.3s; } :root:has(.wt-s, .wt-chrome) #page-container .share a:hover{ color: #fff; border-color: var(--red); background: var(--red); } :root:has(.wt-s, .wt-chrome) #page-container .share svg, :root:has(.wt-s, .wt-chrome) #page-container .share .ico{ width: 16px; height: 16px; } :root:has(.wt-s, .wt-chrome) #page-container .prose{ font-size: 1.1rem; line-height: 1.8; color: #cfced4; } :root:has(.wt-s, .wt-chrome) #page-container .prose > .et_pb_text_inner > * + *, :root:has(.wt-s, .wt-chrome) #page-container .prose > * + *{ margin-top: 1.1em; } :root:has(.wt-s, .wt-chrome) #page-container .prose h2{ font-family: var(--f-display); font-weight: 600; font-size: clamp(1.6rem, 2.6vw, 2.2rem); letter-spacing: -0.035em; line-height: 1.15; color: var(--text); margin-top: 2.2em; scroll-margin-top: 120px; } :root:has(.wt-s, .wt-chrome) #page-container .prose h3{ font-family: var(--f-display); font-weight: 600; font-size: 1.35rem; letter-spacing: -0.02em; color: var(--text); margin-top: 1.8em; } :root:has(.wt-s, .wt-chrome) #page-container .prose ul{ padding-left: 0; list-style: none; } :root:has(.wt-s, .wt-chrome) #page-container .prose li{ position: relative; padding-left: 26px; margin-top: 0.8em; } :root:has(.wt-s, .wt-chrome) #page-container .prose li::before{ content: ""; position: absolute; left: 4px; top: 0.7em; width: 8px; height: 8px; border-radius: 2px; background: var(--red); transform: rotate(45deg); } :root:has(.wt-s, .wt-chrome) #page-container .prose li b{ color: var(--text); } :root:has(.wt-s, .wt-chrome) #page-container .prose blockquote{ border-left: 2px solid var(--red); padding: 6px 0 6px 24px; font-family: var(--f-display); font-size: 1.6rem; line-height: 1.3; letter-spacing: -0.02em; color: var(--text); } :root:has(.wt-s, .wt-chrome) #page-container .prose .stat-pull{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; margin: 2em 0; } :root:has(.wt-s, .wt-chrome) #page-container .prose .stat-pull div{ background: var(--bg-2); padding: 20px; } :root:has(.wt-s, .wt-chrome) #page-container .prose .stat-pull b{ display: block; font-family: var(--f-display); font-size: 2rem; letter-spacing: -0.04em; color: var(--red); line-height: 1; margin-bottom: 6px; } :root:has(.wt-s, .wt-chrome) #page-container .prose .stat-pull small{ color: var(--muted); font-size: 0.82rem; line-height: 1.4; display: block; } :root:has(.wt-s, .wt-chrome) #page-container .inline-cta{ margin: 2.4em 0; padding: 28px; border-radius: 22px; border: 1px solid rgba(255, 45, 45, 0.35); background: linear-gradient(140deg, rgba(255, 45, 45, 0.14), transparent 70%); display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; } :root:has(.wt-s, .wt-chrome) #page-container .inline-cta b{ display: block; font-family: var(--f-display); font-size: 1.4rem; letter-spacing: -0.02em; color: var(--text); } :root:has(.wt-s, .wt-chrome) #page-container .inline-cta span{ color: var(--muted); font-size: 0.95rem; } :root:has(.wt-s, .wt-chrome) #page-container .aside-card{ position: sticky; top: 120px; align-self: start; border-radius: 22px; border: 1px solid var(--line-2); background: var(--surface); padding: 22px; } :root:has(.wt-s, .wt-chrome) #page-container .aside-card b{ display: block; font-family: var(--f-display); font-size: 1.2rem; letter-spacing: -0.02em; margin: 8px 0 6px; } :root:has(.wt-s, .wt-chrome) #page-container .aside-card p{ color: var(--muted); font-size: 0.88rem; margin-bottom: 16px; } :root:has(.wt-s, .wt-chrome) #page-container .contact-grid{ display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(32px, 5vw, 72px); align-items: start; } :root:has(.wt-s, .wt-chrome) #page-container .form-card{ border-radius: 28px; border: 1px solid var(--line-2); background: linear-gradient(180deg, var(--surface), var(--bg-2)); padding: clamp(24px, 3.4vw, 40px); box-shadow: 0 40px 100px -40px rgba(255, 45, 45, 0.3); } :root:has(.wt-s, .wt-chrome) #page-container .form-card h2{ font-family: var(--f-display); font-weight: 600; font-size: 1.7rem; letter-spacing: -0.03em; margin-bottom: 6px; } :root:has(.wt-s, .wt-chrome) #page-container .form-card > .et_pb_text_inner > p, :root:has(.wt-s, .wt-chrome) #page-container .form-card > p{ color: var(--muted); margin-bottom: 26px; font-size: 0.95rem; } :root:has(.wt-s, .wt-chrome) #page-container .form-fields{ display: flex; flex-direction: column; gap: 18px; } :root:has(.wt-s, .wt-chrome) #page-container .form-foot{ display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 6px; } :root:has(.wt-s, .wt-chrome) #page-container .form-foot small{ color: var(--dim); font-size: 0.8rem; } :root:has(.wt-s, .wt-chrome) #page-container .methods{ display: flex; flex-direction: column; gap: 12px; margin-top: 34px; } :root:has(.wt-s, .wt-chrome) #page-container .method{ display: flex; align-items: center; gap: 16px; padding: 18px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); transition: border-color 0.3s; } :root:has(.wt-s, .wt-chrome) #page-container .method:hover{ border-color: rgba(255, 60, 50, 0.4); } :root:has(.wt-s, .wt-chrome) #page-container .method b{ display: block; } :root:has(.wt-s, .wt-chrome) #page-container .method small{ color: var(--muted); font-size: 0.88rem; } :root:has(.wt-s, .wt-chrome) #page-container .method .link-arrow{ margin-left: auto; } :root:has(.wt-s, .wt-chrome) #page-container .resp{ display: inline-flex; align-items: center; gap: 10px; margin-top: 26px; padding: 10px 16px; border-radius: 99px; border: 1px solid var(--line-2); font-size: 0.88rem; color: var(--muted); } :root:has(.wt-s, .wt-chrome) #page-container .resp i{ width: 8px; height: 8px; border-radius: 50%; background: #3ddc97; box-shadow: 0 0 8px #3ddc97; } :root:has(.wt-s, .wt-chrome) #page-container .gs{ display: grid; grid-template-columns: 0.75fr 1.25fr; gap: clamp(28px, 5vw, 64px); align-items: start; } :root:has(.wt-s, .wt-chrome) #page-container .gs-side{ position: sticky; top: 120px; } :root:has(.wt-s, .wt-chrome) #page-container .gs-side .phero-title{ font-size: clamp(2.4rem, 4.6vw, 4rem); max-width: 12ch; } :root:has(.wt-s, .wt-chrome) #page-container .gs-summary{ margin-top: 28px; border-radius: 20px; border: 1px solid var(--line-2); background: var(--surface); padding: 20px; } :root:has(.wt-s, .wt-chrome) #page-container .gs-summary .mono{ color: var(--dim); display: block; margin-bottom: 10px; } :root:has(.wt-s, .wt-chrome) #page-container .gs-sum-row{ display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px dashed var(--line); font-size: 0.9rem; } :root:has(.wt-s, .wt-chrome) #page-container .gs-sum-row:last-child{ border-bottom: 0; } :root:has(.wt-s, .wt-chrome) #page-container .gs-sum-row span{ color: var(--muted); } :root:has(.wt-s, .wt-chrome) #page-container .gs-sum-row b{ font-weight: 600; text-align: right; } :root:has(.wt-s, .wt-chrome) #page-container .gs-quote{ margin-top: 18px; color: var(--muted); font-size: 0.92rem; display: flex; gap: 12px; align-items: flex-start; } :root:has(.wt-s, .wt-chrome) #page-container .gs-quote .av{ flex: none; width: 36px; height: 36px; border-radius: 50%; background: center / cover; } :root:has(.wt-s, .wt-chrome) #page-container .gs-track{ position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 28px; } :root:has(.wt-s, .wt-chrome) #page-container .gs-clip{ height: 48px; border-radius: 10px; padding: 0 12px; display: flex; flex-direction: column; justify-content: center; border: 1px solid var(--line-2); background: var(--bg-2); color: var(--muted); transition: all 0.4s; overflow: hidden; } :root:has(.wt-s, .wt-chrome) #page-container .gs-clip small{ font-family: var(--f-mono); font-size: 0.56rem; letter-spacing: 0.08em; } :root:has(.wt-s, .wt-chrome) #page-container .gs-clip b{ font-size: 0.82rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } :root:has(.wt-s, .wt-chrome) #page-container .gs-clip.is-active{ background: linear-gradient(180deg, #e8312f, #8a1218); border-color: rgba(255, 140, 130, 0.6); color: #fff; box-shadow: 0 10px 30px -10px var(--red-glow); } :root:has(.wt-s, .wt-chrome) #page-container .gs-clip.is-done{ background: linear-gradient(180deg, #5a1a1c, #2e0d0f); border-color: rgba(255, 45, 45, 0.3); color: #ffb0aa; } :root:has(.wt-s, .wt-chrome) #page-container .gs-head{ position: absolute; top: -8px; bottom: -8px; width: 2px; background: var(--red); box-shadow: 0 0 12px var(--red); left: 0; transition: left 0.6s var(--ease); } :root:has(.wt-s, .wt-chrome) #page-container .gs-head::before{ content: ""; position: absolute; top: 0; left: -5px; width: 12px; height: 10px; background: var(--red); clip-path: polygon(0 0, 100% 0, 100% 50%, 50% 100%, 0 50%); } :root:has(.wt-s, .wt-chrome) #page-container .gs-step{ display: none; } :root:has(.wt-s, .wt-chrome) #page-container .gs-step.is-active{ display: block; animation: stepin 0.6s var(--ease); } @keyframes stepin{ from { opacity: 0; transform: translateX(24px); } } :root:has(.wt-s, .wt-chrome) #page-container .gs-step h2{ font-family: var(--f-display); font-weight: 600; font-size: 1.8rem; letter-spacing: -0.03em; margin-bottom: 6px; } :root:has(.wt-s, .wt-chrome) #page-container .gs-step > p, :root:has(.wt-s, .wt-chrome) #page-container .gs-step > .et_pb_text_inner > p{ color: var(--muted); margin-bottom: 24px; } :root:has(.wt-s, .wt-chrome) #page-container .choice-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } :root:has(.wt-s, .wt-chrome) #page-container .choice > span, :root:has(.wt-s, .wt-chrome) #page-container .choice > .et_pb_text_inner > span{ position: relative; display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 20px; border-radius: 18px; border: 1px solid var(--line-2); background: var(--bg-2); cursor: pointer; transition: all 0.3s; } :root:has(.wt-s, .wt-chrome) #page-container .choice > .et_pb_text_inner > span:hover, :root:has(.wt-s, .wt-chrome) #page-container .choice > span:hover{ border-color: rgba(255, 255, 255, 0.3); } :root:has(.wt-s, .wt-chrome) #page-container .choice input:checked + span{ border-color: var(--red); background: rgba(255, 45, 45, 0.08); box-shadow: 0 0 0 4px rgba(255, 45, 45, 0.12); } :root:has(.wt-s, .wt-chrome) #page-container .choice input:focus-visible + span{ box-shadow: 0 0 0 4px rgba(255, 45, 45, 0.3); } :root:has(.wt-s, .wt-chrome) #page-container .choice > span::after, :root:has(.wt-s, .wt-chrome) #page-container .choice > .et_pb_text_inner > span::after{ content: ""; position: absolute; top: 18px; right: 18px; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--line-2); transition: all 0.3s; } :root:has(.wt-s, .wt-chrome) #page-container .choice input:checked + span::after{ border-color: var(--red); background: var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center / 12px no-repeat; } :root:has(.wt-s, .wt-chrome) #page-container .choice b{ font-family: var(--f-display); font-size: 1.2rem; letter-spacing: -0.02em; } :root:has(.wt-s, .wt-chrome) #page-container .choice .cp{ font-family: var(--f-display); font-size: 1.6rem; letter-spacing: -0.04em; } :root:has(.wt-s, .wt-chrome) #page-container .choice .cp small{ font-family: var(--f-body); font-size: 0.8rem; color: var(--muted); letter-spacing: 0; } :root:has(.wt-s, .wt-chrome) #page-container .choice small{ color: var(--muted); font-size: 0.85rem; line-height: 1.4; padding-right: 24px; } :root:has(.wt-s, .wt-chrome) #page-container .choice .tag{ position: absolute; top: -10px; left: 18px; font-family: var(--f-mono); font-size: 0.58rem; padding: 4px 8px; border-radius: 99px; background: var(--red); color: #fff; letter-spacing: 0.06em; text-transform: uppercase; } :root:has(.wt-s, .wt-chrome) #page-container .gs-nav{ display: flex; justify-content: space-between; gap: 12px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); } :root:has(.wt-s, .wt-chrome) #page-container .gs-nav .btn[disabled]{ opacity: 0.35; pointer-events: none; } :root:has(.wt-s, .wt-chrome) #page-container .slots-days{ display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 16px; } :root:has(.wt-s, .wt-chrome) #page-container .slots-days .pill span, :root:has(.wt-s, .wt-chrome) #page-container .slots-times .pill span{ width: 100%; justify-content: center; flex-direction: column; gap: 0; border-radius: 14px; padding: 12px 6px; } :root:has(.wt-s, .wt-chrome) #page-container .slots-days .pill span small{ font-family: var(--f-mono); font-size: 0.58rem; color: var(--muted); letter-spacing: 0.08em; } :root:has(.wt-s, .wt-chrome) #page-container .slots-days .pill span b{ font-family: var(--f-display); font-size: 1.3rem; } :root:has(.wt-s, .wt-chrome) #page-container .slots-days .pill, :root:has(.wt-s, .wt-chrome) #page-container .slots-times .pill{ display: block; } :root:has(.wt-s, .wt-chrome) #page-container .slots-times{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } :root:has(.wt-s, .wt-chrome) #page-container .gs-done{ text-align: center; padding: 20px 0; } :root:has(.wt-s, .wt-chrome) #page-container .gs-done .tc-big{ font-family: var(--f-mono); font-size: clamp(1.6rem, 4vw, 2.6rem); color: var(--red); letter-spacing: 0.04em; margin: 10px 0 18px; text-shadow: 0 0 30px rgba(255, 45, 45, 0.5); } :root:has(.wt-s, .wt-chrome) #page-container .gs-done h2{ font-family: var(--f-display); font-weight: 600; font-size: 2.2rem; letter-spacing: -0.04em; } :root:has(.wt-s, .wt-chrome) #page-container .gs-done p{ color: var(--muted); max-width: 44ch; margin: 10px auto 24px; } :root:has(.wt-s, .wt-chrome) #page-container .is-auth{ min-height: 100vh; } :root:has(.wt-s, .wt-chrome) #page-container .auth-top{ position: absolute; top: 0; left: 0; right: 0; z-index: 10; display: flex; justify-content: space-between; align-items: center; height: 84px; } :root:has(.wt-s, .wt-chrome) #page-container .auth{ min-height: 100vh; display: grid; grid-template-columns: 1fr 1.1fr; } :root:has(.wt-s, .wt-chrome) #page-container .auth-form{ display: flex; align-items: center; justify-content: center; padding: 120px var(--gutter) 60px; } :root:has(.wt-s, .wt-chrome) #page-container .auth > *, :root:has(.wt-s, .wt-chrome) #page-container .auth > .et_pb_text_inner > *{ min-width: 0; } :root:has(.wt-s, .wt-chrome) #page-container .auth-box{ width: 100%; max-width: 420px; } :root:has(.wt-s, .wt-chrome) #page-container .auth-box .field input{ min-width: 0; } :root:has(.wt-s, .wt-chrome) #page-container .auth-box h1{ font-family: var(--f-display); font-weight: 650; font-size: clamp(2.4rem, 4vw, 3.4rem); letter-spacing: -0.05em; line-height: 1; margin: 18px 0 10px; } :root:has(.wt-s, .wt-chrome) #page-container .auth-view > p, :root:has(.wt-s, .wt-chrome) #page-container .auth-view > .et_pb_text_inner > p{ color: var(--muted); margin-bottom: 30px; } :root:has(.wt-s, .wt-chrome) #page-container .pw{ position: relative; } :root:has(.wt-s, .wt-chrome) #page-container .pw button{ position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-family: var(--f-mono); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding: 6px; } :root:has(.wt-s, .wt-chrome) #page-container .auth-row{ display: flex; justify-content: space-between; align-items: center; gap: 12px; } :root:has(.wt-s, .wt-chrome) #page-container .auth-row a{ color: var(--muted); font-size: 0.88rem; } :root:has(.wt-s, .wt-chrome) #page-container .auth-row a:hover{ color: var(--red); } :root:has(.wt-s, .wt-chrome) #page-container .auth-alt{ margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.92rem; text-align: center; } :root:has(.wt-s, .wt-chrome) #page-container .auth-alt a{ color: var(--text); font-weight: 600; } :root:has(.wt-s, .wt-chrome) #page-container .auth-alt a:hover{ color: var(--red); } :root:has(.wt-s, .wt-chrome) #page-container .auth-view{ display: none; } :root:has(.wt-s, .wt-chrome) #page-container .auth-view.is-active{ display: block; animation: stepin 0.5s var(--ease); } :root:has(.wt-s, .wt-chrome) #page-container .auth-visual{ position: relative; overflow: hidden; border-left: 1px solid var(--line); background: radial-gradient(70% 60% at 60% 40%, rgba(255, 45, 45, 0.25), transparent 70%), var(--bg-2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 36px; padding: 110px 40px 48px; } :root:has(.wt-s, .wt-chrome) #page-container .auth-visual .grid-bg{ -webkit-mask: radial-gradient(ellipse 70% 70% at 50% 50%, #000 20%, transparent 75%); mask: radial-gradient(ellipse 70% 70% at 50% 50%, #000 20%, transparent 75%); } :root:has(.wt-s, .wt-chrome) #page-container .portal{ position: relative; width: min(560px, 100%); border-radius: 22px; border: 1px solid var(--line-2); background: rgba(14, 14, 18, 0.92); backdrop-filter: blur(10px); box-shadow: 0 50px 120px -30px rgba(255, 45, 45, 0.4); overflow: hidden; transform: perspective(1400px) rotateY(-8deg) rotateX(4deg); } :root:has(.wt-s, .wt-chrome) #page-container .portal-top{ display: flex; justify-content: space-between; align-items: center; padding: 16px 18px; border-bottom: 1px solid var(--line); } :root:has(.wt-s, .wt-chrome) #page-container .portal-top b{ font-family: var(--f-display); font-size: 1.05rem; } :root:has(.wt-s, .wt-chrome) #page-container .portal-body{ padding: 18px; display: grid; gap: 14px; } :root:has(.wt-s, .wt-chrome) #page-container .portal-stats{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } :root:has(.wt-s, .wt-chrome) #page-container .portal-stats div{ padding: 14px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); } :root:has(.wt-s, .wt-chrome) #page-container .portal-stats b{ display: block; font-family: var(--f-display); font-size: 1.6rem; letter-spacing: -0.04em; line-height: 1; } :root:has(.wt-s, .wt-chrome) #page-container .portal-stats small{ color: var(--muted); font-size: 0.72rem; } :root:has(.wt-s, .wt-chrome) #page-container .portal-stats div:first-child b{ color: var(--red); } :root:has(.wt-s, .wt-chrome) #page-container .auth-quote{ position: relative; width: min(560px, 100%); color: var(--muted); font-size: 0.92rem; display: flex; gap: 12px; align-items: center; } :root:has(.wt-s, .wt-chrome) #page-container .auth-quote .av{ flex: none; width: 36px; height: 36px; border-radius: 50%; background: center / cover; } :root:has(.wt-s, .wt-chrome) #page-container .reasons{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; } :root:has(.wt-s, .wt-chrome) #page-container .reason{ background: var(--bg); padding: 32px 30px; display: flex; flex-direction: column; gap: 10px; transition: background 0.4s; } :root:has(.wt-s, .wt-chrome) #page-container .reason:hover{ background: var(--surface); } :root:has(.wt-s, .wt-chrome) #page-container .reason .mono{ color: var(--red); } :root:has(.wt-s, .wt-chrome) #page-container .reason h3{ font-family: var(--f-display); font-weight: 600; font-size: 1.35rem; letter-spacing: -0.025em; line-height: 1.15; } :root:has(.wt-s, .wt-chrome) #page-container .reason .hl{ color: var(--text); font-weight: 500; } :root:has(.wt-s, .wt-chrome) #page-container .reason p{ color: var(--muted); font-size: 0.94rem; } :root:has(.wt-s, .wt-chrome) #page-container .nos{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } :root:has(.wt-s, .wt-chrome) #page-container .no{ padding: 34px 30px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--bg-2); position: relative; overflow: hidden; } :root:has(.wt-s, .wt-chrome) #page-container .no b{ display: block; font-family: var(--f-display); font-weight: 650; font-size: clamp(1.8rem, 3vw, 2.4rem); letter-spacing: -0.045em; line-height: 1.05; } :root:has(.wt-s, .wt-chrome) #page-container .no b s{ text-decoration-color: var(--red); text-decoration-thickness: 3px; color: var(--muted); } :root:has(.wt-s, .wt-chrome) #page-container .no p{ color: var(--muted); margin-top: 12px; font-size: 0.94rem; } :root:has(.wt-s, .wt-chrome) #page-container .team{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } :root:has(.wt-s, .wt-chrome) #page-container .member{ position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 3 / 4; border: 1px solid var(--line-2); background: #111; } :root:has(.wt-s, .wt-chrome) #page-container .member img{ width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); transition: filter 0.6s, transform 0.9s var(--ease); } :root:has(.wt-s, .wt-chrome) #page-container .member:hover img{ filter: grayscale(0); transform: scale(1.04); } :root:has(.wt-s, .wt-chrome) #page-container .member::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, 0.9)); } :root:has(.wt-s, .wt-chrome) #page-container .member-info{ position: absolute; z-index: 2; left: 22px; right: 22px; bottom: 20px; display: flex; justify-content: space-between; align-items: flex-end; } :root:has(.wt-s, .wt-chrome) #page-container .member-info b{ display: block; font-family: var(--f-display); font-size: 1.4rem; letter-spacing: -0.03em; } :root:has(.wt-s, .wt-chrome) #page-container .member-info small{ color: #ff8f88; } :root:has(.wt-s, .wt-chrome) #page-container .member-info .mono{ color: rgba(255, 255, 255, 0.5); } :root:has(.wt-s, .wt-chrome) #page-container .markets{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; } :root:has(.wt-s, .wt-chrome) #page-container .market{ display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 99px; border: 1px solid var(--line-2); background: var(--surface); font-size: 0.92rem; } :root:has(.wt-s, .wt-chrome) #page-container .market i{ font-style: normal; font-family: var(--f-mono); font-size: 0.66rem; color: var(--red); } :root:has(.wt-s, .wt-chrome) #page-container .legal{ display: grid; grid-template-columns: 260px minmax(0, 760px); gap: clamp(32px, 5vw, 80px); } :root:has(.wt-s, .wt-chrome) #page-container .legal .prose{ font-size: 1.02rem; } :root:has(.wt-s, .wt-chrome) #page-container .legal .prose h2{ font-size: 1.55rem; margin-top: 2.4em; padding-top: 1em; border-top: 1px solid var(--line); } :root:has(.wt-s, .wt-chrome) #page-container .legal .prose h2:first-child{ margin-top: 0; border-top: 0; padding-top: 0; } :root:has(.wt-s, .wt-chrome) #page-container .legal .prose h2 span{ font-family: var(--f-mono); font-size: 0.8rem; color: var(--red); margin-right: 10px; letter-spacing: 0.04em; } :root:has(.wt-s, .wt-chrome) #page-container .legal-note{ padding: 18px 20px; border-radius: 16px; border: 1px solid var(--line-2); background: var(--surface); color: var(--muted); font-size: 0.92rem; } :root:has(.wt-s, .wt-chrome) #page-container .nf{ min-height: 100vh; display: grid; place-items: center; text-align: center; padding: 140px var(--gutter) 80px; position: relative; overflow: hidden; } :root:has(.wt-s, .wt-chrome) #page-container .nf-code{ font-family: var(--f-display); font-weight: 700; font-size: clamp(8rem, 28vw, 22rem); letter-spacing: -0.08em; line-height: 0.8; position: relative; background: linear-gradient(180deg, #fff, rgba(255, 255, 255, 0.1)); -webkit-background-clip: text; background-clip: text; color: transparent; } :root:has(.wt-s, .wt-chrome) #page-container .nf-code::after{ content: "404"; position: absolute; inset: 0; color: var(--red); mix-blend-mode: screen; opacity: 0.6; transform: translate(6px, -2px); animation: glitch 2.4s steps(1) infinite; -webkit-background-clip: initial; } @keyframes glitch{ 0%, 90% { clip-path: inset(0 0 0 0); transform: translate(4px, 0); } 92% { clip-path: inset(20% 0 60% 0); transform: translate(-10px, 0); } 95% { clip-path: inset(60% 0 10% 0); transform: translate(10px, 0); } } @media (max-width: 1100px){:root:has(.wt-s, .wt-chrome) #page-container .nav-signin{ display: none; } :root:has(.wt-s, .wt-chrome) #page-container .phero-grid, :root:has(.wt-s, .wt-chrome) #page-container .duo, :root:has(.wt-s, .wt-chrome) #page-container .pillar, :root:has(.wt-s, .wt-chrome) #page-container .hiw, :root:has(.wt-s, .wt-chrome) #page-container .contact-grid, :root:has(.wt-s, .wt-chrome) #page-container .gs, :root:has(.wt-s, .wt-chrome) #page-container .post-feat, :root:has(.wt-s, .wt-chrome) #page-container .newsletter, :root:has(.wt-s, .wt-chrome) #page-container .reco, :root:has(.wt-s, .wt-chrome) #page-container .auth{ grid-template-columns: 1fr; } :root:has(.wt-s, .wt-chrome) #page-container .duo.rev > .et_pb_text_inner > :first-child, :root:has(.wt-s, .wt-chrome) #page-container .duo.rev > :first-child, :root:has(.wt-s, .wt-chrome) #page-container .pillar.rev .pillar-media{ order: 0; } :root:has(.wt-s, .wt-chrome) #page-container .hero-visual{ max-width: 620px; } :root:has(.wt-s, .wt-chrome) #page-container .cards.c4{ grid-template-columns: repeat(2, 1fr); } :root:has(.wt-s, .wt-chrome) #page-container .pains, :root:has(.wt-s, .wt-chrome) #page-container .reasons, :root:has(.wt-s, .wt-chrome) #page-container .nos, :root:has(.wt-s, .wt-chrome) #page-container .team, :root:has(.wt-s, .wt-chrome) #page-container .posts{ grid-template-columns: repeat(2, 1fr); } :root:has(.wt-s, .wt-chrome) #page-container .wgrid{ grid-template-columns: repeat(2, 1fr); } :root:has(.wt-s, .wt-chrome) #page-container .band{ grid-template-columns: repeat(2, 1fr); } :root:has(.wt-s, .wt-chrome) #page-container .week{ grid-template-columns: repeat(2, 1fr); } :root:has(.wt-s, .wt-chrome) #page-container .day:nth-child(2){ border-right: 0; } :root:has(.wt-s, .wt-chrome) #page-container .day:nth-child(-n+2){ border-bottom: 1px solid var(--line); } :root:has(.wt-s, .wt-chrome) #page-container .day::after{ display: none; } :root:has(.wt-s, .wt-chrome) #page-container .hiw-sticky{ display: none; } :root:has(.wt-s, .wt-chrome) #page-container .hiw-step{ min-height: 0; opacity: 1; padding: 28px 0; border-top: 1px solid var(--line); } :root:has(.wt-s, .wt-chrome) #page-container .article-wrap{ grid-template-columns: minmax(0, 1fr); } :root:has(.wt-s, .wt-chrome) #page-container .toc, :root:has(.wt-s, .wt-chrome) #page-container .aside-card{ display: none; } :root:has(.wt-s, .wt-chrome) #page-container .legal{ grid-template-columns: 1fr; } :root:has(.wt-s, .wt-chrome) #page-container .legal .toc{ display: none; } :root:has(.wt-s, .wt-chrome) #page-container .faq-page{ grid-template-columns: 1fr; } :root:has(.wt-s, .wt-chrome) #page-container .faq-cats{ position: static; flex-direction: row; flex-wrap: wrap; } :root:has(.wt-s, .wt-chrome) #page-container .faq-cats button{ border: 1px solid var(--line-2); border-radius: 99px; padding: 8px 14px; font-size: 0.85rem; gap: 6px; } :root:has(.wt-s, .wt-chrome) #page-container .faq-cats button.is-on{ box-shadow: none; background: var(--red); border-color: var(--red); } :root:has(.wt-s, .wt-chrome) #page-container .gs-side{ position: static; } :root:has(.wt-s, .wt-chrome) #page-container .auth-visual{ display: none; } :root:has(.wt-s, .wt-chrome) #page-container .reco-out{ border-left: 0; border-top: 1px solid var(--line-2); } :root:has(.wt-s, .wt-chrome) #page-container .phero-stamp{ display: none; }} @media (max-width: 860px){:root:has(.wt-s, .wt-chrome) #page-container .cards, :root:has(.wt-s, .wt-chrome) #page-container .cards.c2{ grid-template-columns: 1fr; } :root:has(.wt-s, .wt-chrome) #page-container .mx-row{ grid-template-columns: 1fr 1fr; } :root:has(.wt-s, .wt-chrome) #page-container .mx-row > .et_pb_text_inner > span, :root:has(.wt-s, .wt-chrome) #page-container .mx-row > span{ padding: 14px 16px; font-size: 0.9rem; } :root:has(.wt-s, .wt-chrome) #page-container .mx-row > span:first-child, :root:has(.wt-s, .wt-chrome) #page-container .mx-row > .et_pb_text_inner > span:first-child{ grid-column: 1 / -1; padding-bottom: 0; } :root:has(.wt-s, .wt-chrome) #page-container .mx-head > span:first-child, :root:has(.wt-s, .wt-chrome) #page-container .mx-head > .et_pb_text_inner > span:first-child{ display: none; } :root:has(.wt-s, .wt-chrome) #page-container .vs-row{ grid-template-columns: 0.7fr 1fr 1fr; } :root:has(.wt-s, .wt-chrome) #page-container .vs-row > .et_pb_text_inner > span, :root:has(.wt-s, .wt-chrome) #page-container .vs-row > span{ padding: 14px 12px; font-size: 0.85rem; } :root:has(.wt-s, .wt-chrome) #page-container .vs-head > span, :root:has(.wt-s, .wt-chrome) #page-container .vs-head > .et_pb_text_inner > span{ font-size: 1rem !important; } :root:has(.wt-s, .wt-chrome) #page-container .pt-row{ grid-template-columns: 1.2fr 0.8fr 0.8fr 0.8fr; } :root:has(.wt-s, .wt-chrome) #page-container .pt-row > span, :root:has(.wt-s, .wt-chrome) #page-container .pt-row > .et_pb_text_inner > span{ padding: 12px 10px; font-size: 0.8rem; } :root:has(.wt-s, .wt-chrome) #page-container .pt-head b{ font-size: 0.95rem; } :root:has(.wt-s, .wt-chrome) #page-container .uc-cols{ grid-template-columns: 1fr; } :root:has(.wt-s, .wt-chrome) #page-container .pillar-media{ min-height: 0; } :root:has(.wt-s, .wt-chrome) #page-container .pillar-media .frame.vert.back, :root:has(.wt-s, .wt-chrome) #page-container .pillar-media .frame.vert.back2{ display: none; } :root:has(.wt-s, .wt-chrome) #page-container .hsteps{ grid-template-columns: 1fr; gap: 28px; } :root:has(.wt-s, .wt-chrome) #page-container .hsteps::before{ display: none; } :root:has(.wt-s, .wt-chrome) #page-container .showreel{ aspect-ratio: 4 / 3; } :root:has(.wt-s, .wt-chrome) #page-container .showreel-cap{ left: 20px; bottom: 24px; }} @media (max-width: 600px){:root:has(.wt-s, .wt-chrome) #page-container .dd-menu{ display: none; } :root:has(.wt-s, .wt-chrome) #page-container .fgrid{ grid-template-columns: 1fr; } :root:has(.wt-s, .wt-chrome) #page-container .choice-grid{ grid-template-columns: 1fr; } :root:has(.wt-s, .wt-chrome) #page-container .slots-days{ grid-template-columns: repeat(3, 1fr); } :root:has(.wt-s, .wt-chrome) #page-container .slots-times{ grid-template-columns: repeat(2, 1fr); } :root:has(.wt-s, .wt-chrome) #page-container .pains, :root:has(.wt-s, .wt-chrome) #page-container .reasons, :root:has(.wt-s, .wt-chrome) #page-container .nos, :root:has(.wt-s, .wt-chrome) #page-container .team, :root:has(.wt-s, .wt-chrome) #page-container .posts, :root:has(.wt-s, .wt-chrome) #page-container .cards.c4, :root:has(.wt-s, .wt-chrome) #page-container .wgrid{ grid-template-columns: 1fr; } :root:has(.wt-s, .wt-chrome) #page-container .witem.tall{ grid-row: auto; aspect-ratio: 4 / 5; } :root:has(.wt-s, .wt-chrome) #page-container .band{ grid-template-columns: 1fr 1fr; } :root:has(.wt-s, .wt-chrome) #page-container .band > div, :root:has(.wt-s, .wt-chrome) #page-container .band > .et_pb_text_inner > div{ padding: 22px 18px; } :root:has(.wt-s, .wt-chrome) #page-container .week{ grid-template-columns: 1fr; } :root:has(.wt-s, .wt-chrome) #page-container .day{ border-right: 0 !important; border-bottom: 1px solid var(--line); } :root:has(.wt-s, .wt-chrome) #page-container .ticks.two{ grid-template-columns: 1fr; } :root:has(.wt-s, .wt-chrome) #page-container .morph{ height: 380px; } @keyframes morph{ 0%, 38% { width: 100%; height: 200px; } 50%, 88% { width: 190px; height: 340px; } 100% { width: 100%; height: 200px; } } :root:has(.wt-s, .wt-chrome) #page-container .hero-visual .float-tag{ font-size: 0.72rem; padding: 8px 10px; } :root:has(.wt-s, .wt-chrome) #page-container .hero-visual .ft-1{ left: 6px; top: -14px; } :root:has(.wt-s, .wt-chrome) #page-container .hero-visual .ft-2{ right: 6px; } :root:has(.wt-s, .wt-chrome) #page-container .hero-visual .ft-3{ display: none; } :root:has(.wt-s, .wt-chrome) #page-container .gs-clip b{ display: none; } :root:has(.wt-s, .wt-chrome) #page-container .gs-clip{ height: 36px; align-items: center; } :root:has(.wt-s, .wt-chrome) #page-container .post-feat-img{ min-height: 240px; } :root:has(.wt-s, .wt-chrome) #page-container .uc-tabs{ top: 84px; } :root:has(.wt-s, .wt-chrome) #page-container .pt-row{ grid-template-columns: 1.1fr 0.7fr 0.7fr 0.7fr; } :root:has(.wt-s, .wt-chrome) #page-container .pt-row > span, :root:has(.wt-s, .wt-chrome) #page-container .pt-row > .et_pb_text_inner > span{ padding: 10px 6px; font-size: 0.72rem; } :root:has(.wt-s, .wt-chrome) #page-container .pt-head small{ display: none; } :root:has(.wt-s, .wt-chrome) #page-container .vs-row{ grid-template-columns: 1fr 1fr; } :root:has(.wt-s, .wt-chrome) #page-container .vs-row > span:first-child, :root:has(.wt-s, .wt-chrome) #page-container .vs-row > .et_pb_text_inner > span:first-child{ grid-column: 1 / -1; padding-bottom: 0; background: none; } :root:has(.wt-s, .wt-chrome) #page-container .vs-head > span:first-child, :root:has(.wt-s, .wt-chrome) #page-container .vs-head > .et_pb_text_inner > span:first-child{ display: none; } :root:has(.wt-s, .wt-chrome) #page-container .member{ aspect-ratio: 4 / 4.4; } :root:has(.wt-s, .wt-chrome) #page-container .prose{ font-size: 1.02rem; } :root:has(.wt-s, .wt-chrome) #page-container .prose .stat-pull{ grid-template-columns: 1fr; }} :root:has(.wt-s, .wt-chrome) #page-container .sr-only{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } :root:has(.wt-s, .wt-chrome) #page-container .work-top{ padding-top: clamp(120px, 15vh, 150px) !important; } :root:has(.wt-s, .wt-chrome) #page-container .toggle-only .eyebrow, :root:has(.wt-s, .wt-chrome) #page-container .toggle-only .sec-title, :root:has(.wt-s, .wt-chrome) #page-container .toggle-only .sec-sub{ display: none; } :root:has(.wt-s, .wt-chrome) #page-container .toggle-only .toggle{ margin-top: 0; } :root:has(.wt-s, .wt-chrome) #page-container .section.pricing-top{ padding-top: 10px; border-top: 0 !important; } :root:has(.wt-s, .wt-chrome) #page-container .process{ border-bottom: 0; } @media (max-width: 860px), (pointer: coarse){:root:has(.wt-s, .wt-chrome) #page-container .grain{ display: none; } :root:has(.wt-s, .wt-chrome) #page-container .glow, :root:has(.wt-s, .wt-chrome) #page-container .cta-glow, :root:has(.wt-s, .wt-chrome) #page-container .pricing-glow{ filter: blur(50px); } :root:has(.wt-s, .wt-chrome) #page-container .wt-nav::before, :root:has(.wt-s, .wt-chrome) #page-container .dd-menu, :root:has(.wt-s, .wt-chrome) #page-container .float-tag, :root:has(.wt-s, .wt-chrome) #page-container .float-chip, :root:has(.wt-s, .wt-chrome) #page-container .uc-tabs nav, :root:has(.wt-s, .wt-chrome) #page-container .vmodal-backdrop, :root:has(.wt-s, .wt-chrome) #page-container .frame-bar span, :root:has(.wt-s, .wt-chrome) #page-container .reel-tag, :root:has(.wt-s, .wt-chrome) #page-container .search input{ backdrop-filter: none; -webkit-backdrop-filter: none; } :root:has(.wt-s, .wt-chrome) #page-container .wt-nav::before{ background: rgba(8, 8, 10, 0.94); } :root:has(.wt-s, .wt-chrome) #page-container .hero-arc{ display: none; } :root:has(.wt-s, .wt-chrome) #page-container .ed-meter i, :root:has(.wt-s, .wt-chrome) #page-container .ed-vu i, :root:has(.wt-s, .wt-chrome) #page-container .viz-wave i{ animation: none; }} :root:has(.wt-s, .wt-chrome) #page-container .gs-error{ display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 0.9rem; font-weight: 500; color: #ff8f88; animation: gs-shake 0.4s; } :root:has(.wt-s, .wt-chrome) #page-container .gs-error::before{ content: "!"; flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--red); color: #fff; font-size: 0.75rem; font-weight: 700; } @keyframes gs-shake{ 0%, 100% { transform: none; } 25% { transform: translateX(-6px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } } @media (max-width: 767px){:root:has(.wt-s, .wt-chrome) #page-container .ptypes{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } :root:has(.wt-s, .wt-chrome) #page-container .ptype{ padding: 14px 16px; }} @media (max-width: 340px){:root:has(.wt-s, .wt-chrome) #page-container .ptypes{ grid-template-columns: 1fr; }} :root:has(.wt-s, .wt-chrome) body{margin:0} :root:has(.wt-s, .wt-chrome) #main-header, :root:has(.wt-s, .wt-chrome) #top-header, :root:has(.wt-s, .wt-chrome) #main-footer{display:none!important} :root:has(.wt-s, .wt-chrome) #page-container .et-l--header:not(:has(.wt-nav)), :root:has(.wt-s, .wt-chrome) #page-container .et-l--footer:not(:has(.wt-footer)){display:none!important} :root:has(.wt-s, .wt-chrome) #page-container .et-l--header{position:relative;z-index:1000;background:transparent} :root:has(.wt-s, .wt-chrome) #page-container .et-l--footer{background:transparent} :root:has(.wt-s, .wt-chrome) #page-container .et-l--header .et_pb_section, :root:has(.wt-s, .wt-chrome) #page-container .et-l--footer .et_pb_section{background:transparent} :root:has(.wt-s, .wt-chrome) body:not(.et-fb) #page-container:has(.et-l--header .wt-nav) #et-main-area .wt-chrome:not(.wt-auth-top), :root:has(.wt-s, .wt-chrome) body:not(.et-fb) #page-container:has(.et-l--footer .wt-footer) #et-main-area .wt-foot{display:none!important} :root:has(.wt-s, .wt-chrome) #page-container{padding-top:0!important;margin-top:0!important;background:var(--bg)} :root:has(.wt-s, .wt-chrome) #main-content, :root:has(.wt-s, .wt-chrome) #et-main-area, :root:has(.wt-s, .wt-chrome) #main-content .container, :root:has(.wt-s, .wt-chrome) .et-l--post, :root:has(.wt-s, .wt-chrome) .et_builder_inner_content{background:transparent!important} :root:has(.wt-s, .wt-chrome) #main-content > .container{padding-top:0!important;width:100%!important;max-width:none!important} :root:has(.wt-s, .wt-chrome) #main-content > .container:before{display:none!important} :root:has(.wt-s, .wt-chrome) #left-area{width:100%!important;padding:0!important;float:none!important} :root:has(.wt-s, .wt-chrome) #sidebar, :root:has(.wt-s, .wt-chrome) .et_post_meta_wrapper, :root:has(.wt-s, .wt-chrome) .et_pb_post > .et_post_meta_wrapper{display:none!important} :root:has(.wt-s, .wt-chrome) .single #page-container .et_pb_post{margin-bottom:0;padding:0} :root:has(.wt-s, .wt-chrome) .admin-bar #page-container .wt-nav{top:32px} @media (max-width:782px){:root:has(.wt-s, .wt-chrome) .admin-bar #page-container .wt-nav{top:46px}} :root:has(.wt-s, .wt-chrome) #page-container :where(.et_pb_text_align_left, .et_pb_text_align_left .et_pb_text_inner){text-align:inherit} :root:has(.wt-s, .wt-chrome) #page-container .et_pb_section.wt-chrome{position:relative;z-index:1000} :root:has(.wt-s, .wt-chrome) #page-container .nav-bar{position:relative;z-index:2} :root:has(.wt-s, .wt-chrome) #page-container .dd-menu{z-index:10} :root:has(.wt-s, .wt-chrome) :where(#page-container .wt-b){display:block} :root:has(.wt-s, .wt-chrome) #page-container .eyebrow.center{display:inline-flex} :root:has(.wt-s, .wt-chrome) #page-container .cta-inner > .et_pb_module, :root:has(.wt-s, .wt-chrome) #page-container .hero-content > .et_pb_module, :root:has(.wt-s, .wt-chrome) #page-container .phero-center > .et_pb_module{max-width:100%} @media (max-width:600px){:root:has(.wt-s, .wt-chrome) #page-container .hero-ctas > .et_pb_button_module_wrapper{text-align:center} :root:has(.wt-s, .wt-chrome) #page-container .et_pb_section a.et_pb_button.link-arrow{justify-content:center;width:100%} } :root:has(.wt-s, .wt-chrome) #page-container .sclip.si{width:24.4%;background:linear-gradient(180deg,#e8312f,#8a1218);border-color:rgba(255,140,130,.5)} :root:has(.wt-s, .wt-chrome) #page-container .sclip.si small{color:rgba(255,255,255,.8)} :root:has(.wt-s, .wt-chrome) #page-container .sclip.si-0{left:0} :root:has(.wt-s, .wt-chrome) #page-container .sclip.si-1{left:25.2%} :root:has(.wt-s, .wt-chrome) #page-container .sclip.si-2{left:50.4%} :root:has(.wt-s, .wt-chrome) #page-container .sclip.si-3{left:75.6%} :root:has(.wt-s, .wt-chrome) #page-container .et_pb_row.wt-grid-row{display:grid} :root:has(.wt-s, .wt-chrome) #page-container .et_pb_row.wt-grid-row::after{display:none} :root:has(.wt-s, .wt-chrome) #page-container .wt-grid-row > .et_pb_column{width:auto!important;margin:0!important;float:none!important} :root:has(.wt-s, .wt-chrome) #page-container .et_pb_row.reels{overflow:hidden} :root:has(.wt-s, .wt-chrome) #page-container .et_pb_column.reels-track{display:flex;width:max-content!important;float:none!important;margin:0!important} :root:has(.wt-s, .wt-chrome) #page-container .et_pb_module.reel::before{display:none} :root:has(.wt-s, .wt-chrome) #page-container .reel .reel-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease);filter:saturate(.9) contrast(1.05)} :root:has(.wt-s, .wt-chrome) #page-container .reel:hover .reel-img{transform:scale(1.06)} :root:has(.wt-s, .wt-chrome) #page-container .reel .reel-link{position:absolute;inset:0;z-index:3;font-size:0} :root:has(.wt-s, .wt-chrome) #page-container .et_pb_row.t-row{display:flex;overflow:hidden;width:100%;max-width:none;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)} :root:has(.wt-s, .wt-chrome) #page-container .et_pb_row.t-row::after{display:none} :root:has(.wt-s, .wt-chrome) #page-container .et_pb_row.t-row + .et_pb_row.t-row{margin-top:18px} :root:has(.wt-s, .wt-chrome) #page-container .et_pb_column.t-track{width:max-content!important;float:none!important;margin:0!important} :root:has(.wt-s, .wt-chrome) #page-container .et_pb_row.t-row:hover .t-track{animation-play-state:paused} :root:has(.wt-s, .wt-chrome) #page-container .et_pb_row.wt-inset{width:calc(100% - 2 * var(--gutter));max-width:calc(var(--max) - 2 * var(--gutter))} :root:has(.wt-s, .wt-chrome) #page-container .pillar.rev > .et_pb_column:first-child{order:2} :root:has(.wt-s, .wt-chrome) #page-container .pillar-copy .et_pb_button_module_wrapper{margin-top:26px} @media (max-width:1100px){:root:has(.wt-s, .wt-chrome) #page-container .pillar.rev > .et_pb_column:first-child{order:0}} :root:has(.wt-s, .wt-chrome) #page-container .wt-linkcard{position:relative} :root:has(.wt-s, .wt-chrome) #page-container .wt-linkcard .wt-cover{position:absolute;inset:0;z-index:2;font-size:0;border-radius:inherit} :root:has(.wt-s, .wt-chrome) #page-container .wt-linkcard:hover .card-img img{transform:scale(1.05)} :root:has(.wt-s, .wt-chrome) #page-container .wt-col{min-width:0} :root:has(.wt-s, .wt-chrome) #page-container .wt-col > .et_pb_button_module_wrapper{display:inline-flex;vertical-align:top;margin:30px 12px 0 0} :root:has(.wt-s, .wt-chrome) #page-container .wt-col > .et_pb_text + .et_pb_button_module_wrapper ~ .et_pb_button_module_wrapper{margin-left:0} @media (max-width:600px){:root:has(.wt-s, .wt-chrome) #page-container .phero .wt-col > .et_pb_button_module_wrapper{display:flex;margin-right:0;margin-top:12px} :root:has(.wt-s, .wt-chrome) #page-container .phero .wt-col > .et_pb_text + .et_pb_button_module_wrapper{margin-top:30px} :root:has(.wt-s, .wt-chrome) #page-container .phero .wt-col a.et_pb_button.btn{width:100%} } :root:has(.wt-s, .wt-chrome) #page-container .wt-col > .method{margin-top:12px} :root:has(.wt-s, .wt-chrome) #page-container .wt-col > .et_pb_text:not(.method) + .method{margin-top:34px} :root:has(.wt-s, .wt-chrome) #page-container .wt-col.uc-copy, :root:has(.wt-s, .wt-chrome) #page-container .wt-col.pillar-copy{align-self:center} :root:has(.wt-s, .wt-chrome) #page-container .et_pb_column.hiw-sticky{align-self:start} :root:has(.wt-s, .wt-chrome) #page-container :where(.wt-prose + .wt-prose, .wt-prose .et_pb_text_inner > * + *){margin-top:1.1em} :root:has(.wt-s, .wt-chrome) #page-container .et_pb_column.aside-card{min-width:155px} :root:has(.wt-s, .wt-chrome) #page-container .witem .reel-link{position:absolute;inset:0;z-index:3;font-size:0} :root:has(.wt-s, .wt-chrome) #page-container .et_pb_column.wgrid{float:none;width:100%!important;margin:0!important} :root:has(.wt-s, .wt-chrome) #page-container .et_pb_row.wt-blog-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap} :root:has(.wt-s, .wt-chrome) #page-container .et_pb_row.wt-blog-head::after{display:none} :root:has(.wt-s, .wt-chrome) #page-container .wt-blog-head > .et_pb_column{width:auto!important;margin:0!important;float:none!important} :root:has(.wt-s, .wt-chrome) #page-container .wt-blog-head > .wt-blog-side{width:100%!important;max-width:440px} :root:has(.wt-s, .wt-chrome) #page-container .et_pb_row + .et_pb_row.wt-blog-head{margin-top:0} :root:has(.wt-s, .wt-chrome) #page-container .wt-blog .et_pb_salvattore_content{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px} :root:has(.wt-s, .wt-chrome) #page-container .wt-blog .et_pb_salvattore_content::before{display:none!important} :root:has(.wt-s, .wt-chrome) #page-container .wt-blog .et_pb_salvattore_content > .column{display:contents} :root:has(.wt-s, .wt-chrome) #page-container .wt-blog .et_pb_post{display:flex;flex-direction:column;margin:0!important;height:100%} :root:has(.wt-s, .wt-chrome) #page-container .wt-blog .et_pb_post.is-hidden{display:none!important} :root:has(.wt-s, .wt-chrome) #page-container .wt-blog .et_pb_post .post-meta{order:2;padding-top:22px!important} :root:has(.wt-s, .wt-chrome) #page-container .wt-blog .et_pb_post .entry-title{order:3;padding-top:12px!important} :root:has(.wt-s, .wt-chrome) #page-container .wt-blog .et_pb_post .post-content{order:4;flex:1;display:flex;flex-direction:column} :root:has(.wt-s, .wt-chrome) #page-container .wt-blog .et_pb_post .more-link{margin-top:auto;padding-top:18px} :root:has(.wt-s, .wt-chrome) #page-container .wt-blog .more-link::after{content:" ↗"} :root:has(.wt-s, .wt-chrome) #page-container .wt-blog-filters{margin:56px 0 28px} :root:has(.wt-s, .wt-chrome) #page-container .wt-blog-filters:empty, :root:has(.wt-s, .wt-chrome) #page-container .wt-blog-filters:not(:has(button)){display:none} @media (max-width:1100px){:root:has(.wt-s, .wt-chrome) #page-container .wt-blog .et_pb_salvattore_content{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:600px){:root:has(.wt-s, .wt-chrome) #page-container .wt-blog .et_pb_salvattore_content{grid-template-columns:1fr}} :root:has(.wt-s, .wt-chrome) #page-container .wt-nav .nav-bar.et_pb_row{display:flex;align-items:center;justify-content:space-between;gap:24px;height:72px} :root:has(.wt-s, .wt-chrome) #page-container .wt-nav .nav-bar.et_pb_row::after{display:none} :root:has(.wt-s, .wt-chrome) #page-container .wt-nav .nav-bar > .et_pb_column{width:auto!important;margin:0!important;float:none;flex:none} :root:has(.wt-s, .wt-chrome) #page-container .wt-nav .nav-bar > .wt-hdr-menu{flex:0 1 auto} :root:has(.wt-s, .wt-chrome) #page-container .wt-nav .et_pb_column.nav-right{display:flex;align-items:center;gap:16px} :root:has(.wt-s, .wt-chrome) #page-container .wt-nav .nav-right > .et_pb_module{margin:0} :root:has(.wt-s, .wt-chrome) #page-container .wt-nav .scrubber{position:relative} :root:has(.wt-s, .wt-chrome) #page-container .wt-nav .et_pb_menu, :root:has(.wt-s, .wt-chrome) #page-container .wt-nav .et_pb_menu_inner_container{background:transparent!important;padding:0} :root:has(.wt-s, .wt-chrome) #page-container .wt-nav .et_mobile_nav_menu, :root:has(.wt-s, .wt-chrome) #page-container .wt-footer .et_mobile_nav_menu{display:none!important} :root:has(.wt-s, .wt-chrome) #page-container .wt-nav .et_pb_menu__menu, :root:has(.wt-s, .wt-chrome) #page-container .wt-footer .et_pb_menu__menu{display:flex!important} :root:has(.wt-s, .wt-chrome) #page-container .wt-nav .et-menu{display:flex;align-items:center;gap:4px;margin:0;padding:0;line-height:1} :root:has(.wt-s, .wt-chrome) #page-container .wt-nav .et-menu > li{padding:0!important;margin:0!important;position:relative} :root:has(.wt-s, .wt-chrome) #page-container .wt-nav .et-menu > li > a{display:inline-flex!important;align-items:center;gap:6px;padding:8px 14px!important;font-family:var(--f-body);font-size:.9rem!important;font-weight:400!important;color:var(--muted)!important;border-radius:999px;transition:color .25s,background .25s;opacity:1!important} :root:has(.wt-s, .wt-chrome) #page-container .wt-nav .et-menu > li > a:hover, :root:has(.wt-s, .wt-chrome) #page-container .wt-nav .et-menu > li:is(.current-menu-item,.current-menu-ancestor,.current-menu-parent,.current_page_item) > a{color:var(--text)!important;background:rgba(255,255,255,.06)} :root:has(.wt-s, .wt-chrome) #page-container .wt-nav .et-menu .menu-item-has-children > a:first-child::after{position:static!important;content:""!important;width:12px;height:12px;margin:0!important;background-color:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .3s} :root:has(.wt-s, .wt-chrome) #page-container .wt-nav .et-menu .menu-item-has-children:hover > a:first-child::after{transform:rotate(180deg)} :root:has(.wt-s, .wt-chrome) #page-container .wt-nav .et-menu .sub-menu{position:absolute;top:calc(100% + 12px)!important;left:50%!important;transform:translate(-50%,8px);width:300px!important;padding:10px!important;margin:0;background:rgba(14,14,18,.98)!important;border:1px solid var(--line-2)!important;border-radius:20px;box-shadow:0 30px 80px -20px rgba(0,0,0,.8);z-index:20;opacity:0;visibility:hidden;transition:opacity .3s,transform .45s var(--ease),visibility .3s} :root:has(.wt-s, .wt-chrome) #page-container .wt-nav .et-menu .sub-menu::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px} :root:has(.wt-s, .wt-chrome) #page-container .wt-nav .et-menu li:hover > .sub-menu{opacity:1;visibility:visible;transform:translate(-50%,0)} :root:has(.wt-s, .wt-chrome) #page-container .wt-nav .et-menu .sub-menu li{display:block;width:100%;padding:0!important} :root:has(.wt-s, .wt-chrome) #page-container .wt-nav .et-menu .sub-menu a{display:flex!important;flex-direction:column;gap:2px;width:100%!important;padding:12px 14px!important;border-radius:12px;color:var(--text)!important;font-size:.92rem!important;font-weight:600!important;line-height:1.3;opacity:1!important;background:none} :root:has(.wt-s, .wt-chrome) #page-container .wt-nav .et-menu .sub-menu a:hover, :root:has(.wt-s, .wt-chrome) #page-container .wt-nav .et-menu .sub-menu .current-menu-item > a{background:rgba(255,255,255,.05)} :root:has(.wt-s, .wt-chrome) #page-container .wt-nav .et-menu .sub-menu a small{font-weight:400;font-size:.8rem;color:var(--muted)} :root:has(.wt-s, .wt-chrome) #page-container .wt-nav .wt-hdr-cta{white-space:nowrap} @media (max-width:1100px){:root:has(.wt-s, .wt-chrome) #page-container .wt-nav .wt-hdr-menu, :root:has(.wt-s, .wt-chrome) #page-container .wt-nav .wt-signin{display:none!important} } @media (max-width:860px){:root:has(.wt-s, .wt-chrome) #page-container .wt-nav .wt-tc{display:none!important}} @media (max-width:600px){:root:has(.wt-s, .wt-chrome) #page-container .wt-nav .wt-hdr-cta{height:40px}} :root:has(.wt-s, .wt-chrome) #page-container > .loader{z-index:4000} :root:has(.wt-s, .wt-chrome) #page-container > .vmodal{z-index:3000} :root:has(.wt-s, .wt-chrome) #page-container > .curtain{z-index:3500} :root:has(.wt-s, .wt-chrome) #page-container > .cursor{z-index:5000} :root:has(.wt-s, .wt-chrome) #page-container:has(.loader) .et-l--header{visibility:hidden} :root:has(.wt-s, .wt-chrome) #page-container .wt-footer .f-top{align-items:start} :root:has(.wt-s, .wt-chrome) #page-container .wt-footer .f-brand .logo{display:inline-flex} :root:has(.wt-s, .wt-chrome) #page-container .wt-footer .f-brand-text p{color:var(--muted);margin:18px 0 24px;max-width:34ch;font-size:.95rem} :root:has(.wt-s, .wt-chrome) #page-container .wt-footer .f-news-label{color:var(--dim);margin-bottom:8px;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase} :root:has(.wt-s, .wt-chrome) #page-container .wt-footer .f-news-form{max-width:380px;margin-bottom:22px} :root:has(.wt-s, .wt-chrome) #page-container .wt-footer .f-col{display:flex;flex-direction:column;gap:0} :root:has(.wt-s, .wt-chrome) #page-container .wt-footer .f-col h5{color:var(--dim);font-weight:500;margin-bottom:14px;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase} :root:has(.wt-s, .wt-chrome) #page-container .wt-footer .et_pb_menu, :root:has(.wt-s, .wt-chrome) #page-container .wt-footer .et_pb_menu_inner_container{background:transparent!important;padding:0} :root:has(.wt-s, .wt-chrome) #page-container .wt-footer .et-menu{display:flex!important;flex-direction:column;align-items:flex-start;gap:12px;margin:0;padding:0} :root:has(.wt-s, .wt-chrome) #page-container .wt-footer .et-menu li{padding:0!important;margin:0!important} :root:has(.wt-s, .wt-chrome) #page-container .wt-footer .et-menu a{padding:0!important;color:#c9c8ce!important;font-size:.95rem!important;font-weight:400!important;line-height:1.35;opacity:1!important;transition:color .3s} :root:has(.wt-s, .wt-chrome) #page-container .wt-footer .et-menu a:hover{color:var(--red)!important} :root:has(.wt-s, .wt-chrome) #page-container .wt-footer .et-menu .sub-menu{position:static;opacity:1;visibility:visible;box-shadow:none;border:0;background:none;padding:12px 0 0;width:auto} :root:has(.wt-s, .wt-chrome) #page-container .wt-footer .et-menu a::after{display:none!important} :root:has(.wt-s, .wt-chrome) #page-container .wt-footer .socials{display:flex;gap:10px;margin:0!important;padding:0} :root:has(.wt-s, .wt-chrome) #page-container .wt-footer .socials li{margin:0!important} :root:has(.wt-s, .wt-chrome) #page-container .wt-footer .socials li a.icon{width:40px;height:40px;border-radius:50%!important;background:transparent!important;border:1px solid var(--line-2)!important;display:grid!important;place-items:center;transition:color .3s,border-color .3s,background .3s} :root:has(.wt-s, .wt-chrome) #page-container .wt-footer .socials li a.icon::before{position:static!important;font-size:16px!important;line-height:1!important;width:auto!important;height:auto!important;color:var(--muted)!important} :root:has(.wt-s, .wt-chrome) #page-container .wt-footer .socials li a.icon:hover{background:var(--red)!important;border-color:var(--red)!important} :root:has(.wt-s, .wt-chrome) #page-container .wt-footer .socials li a.icon:hover::before{color:#fff!important} :root:has(.wt-s, .wt-chrome) #page-container .wt-footer .f-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;color:var(--dim);padding-top:24px;border-top:1px solid var(--line);float:none} :root:has(.wt-s, .wt-chrome) #page-container .wt-footer .f-bottom a{color:var(--dim)} :root:has(.wt-s, .wt-chrome) #page-container .wt-footer .f-bottom a:hover{color:var(--text)} :root:has(.wt-s, .wt-chrome) #page-container .wt-footer .f-word{margin:60px 0 30px} @media (max-width:600px){:root:has(.wt-s, .wt-chrome) #page-container .wt-footer .f-bottom{justify-content:center;text-align:center}} :root:has(.wt-s, .wt-chrome) #page-container .auth-top.et_pb_row{display:flex;align-items:center;justify-content:space-between} :root:has(.wt-s, .wt-chrome) #page-container .auth-top.et_pb_row::after{display:none} :root:has(.wt-s, .wt-chrome) #page-container .auth-top > .et_pb_column{width:auto!important;margin:0!important;float:none} :root:has(.wt-s, .wt-chrome) #page-container .et_pb_text_inner p:empty, :root:has(.wt-s, .wt-chrome) #page-container .et_pb_code_inner p:empty{display:none!important} :root:has(.wt-s, .wt-chrome) #page-container .seq-track > span.mono:first-child{color:var(--dim);text-align:center;background:var(--surface);border-radius:6px;padding:6px 0;font-size:.62rem} :root:has(.wt-s, .wt-chrome) #page-container .et_pb_column.hiw-sticky > .et_pb_module{width:100%} @media (max-width:1100px){:root:has(.wt-s, .wt-chrome) #page-container .et_pb_column.project-strip{margin-left:auto!important;margin-right:auto!important}} :root:has(.wt-s, .wt-chrome) #page-container .nav-bar{z-index:5} :root:has(.wt-s, .wt-chrome) #page-container .dd-menu{z-index:20;background:rgba(14,14,18,.98)} :root:has(.wt-s, .wt-chrome) #page-container .et_pb_column.uc-tabs > .et_pb_module{min-width:0;max-width:100%} :root:has(.wt-s, .wt-chrome) #page-container .uc-tabs nav{max-width:100%;scrollbar-width:none;-webkit-overflow-scrolling:touch} :root:has(.wt-s, .wt-chrome) #page-container .uc-tabs nav::-webkit-scrollbar{display:none} :root:has(.wt-s, .wt-chrome) #page-container .uc-tabs nav a{flex:none} :root:has(.wt-s, .wt-chrome) #page-container .faq-page > .et_pb_column{min-width:0} @media (max-width:1100px){:root:has(.wt-s, .wt-chrome) #page-container .faq-cats{flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:8px 2px 6px} :root:has(.wt-s, .wt-chrome) #page-container .faq-cats::-webkit-scrollbar{display:none} :root:has(.wt-s, .wt-chrome) #page-container .faq-cats button{flex:none;white-space:nowrap} } :root:has(.wt-s, .wt-chrome) #page-container .wt-choice-field .et_pb_contact_field_options_title{display:none} :root:has(.wt-s, .wt-chrome) #page-container .wt-choice-field .et_pb_contact_field_options_list{display:grid;grid-template-columns:1fr 1fr;gap:12px} :root:has(.wt-s, .wt-chrome) #page-container .wt-choice-field .et_pb_contact_field_radio label{position:relative;display:flex!important;flex-direction:column;align-items:flex-start;gap:6px;height:100%;padding:20px!important;border-radius:18px;border:1px solid var(--line-2);background:var(--bg-2);color:var(--text)!important;font-size:1rem!important;line-height:1.3;cursor:pointer;transition:all .3s} :root:has(.wt-s, .wt-chrome) #page-container .wt-choice-field .et_pb_contact_field_radio label:hover{border-color:rgba(255,255,255,.3)} :root:has(.wt-s, .wt-chrome) #page-container .wt-choice-field .et_pb_contact_field_radio input:checked + label{border-color:var(--red);background:rgba(255,45,45,.08);box-shadow:0 0 0 4px rgba(255,45,45,.12);color:var(--text)!important} :root:has(.wt-s, .wt-chrome) #page-container .wt-choice-field label::after{content:"";position:absolute;top:18px;right:18px;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--line-2);transition:all .3s} :root:has(.wt-s, .wt-chrome) #page-container .wt-choice-field input:checked + label::after{border-color:var(--red);background:var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/12px no-repeat} :root:has(.wt-s, .wt-chrome) #page-container .wt-choice-field label b{font-family:var(--f-display);font-size:1.2rem;letter-spacing:-.02em} :root:has(.wt-s, .wt-chrome) #page-container .wt-choice-field label .cp{font-family:var(--f-display);font-size:1.6rem;letter-spacing:-.04em} :root:has(.wt-s, .wt-chrome) #page-container .wt-choice-field label .cp small{font-family:var(--f-body);font-size:.8rem;color:var(--muted);letter-spacing:0;padding:0} :root:has(.wt-s, .wt-chrome) #page-container .wt-choice-field label > small{color:var(--muted);font-size:.85rem;line-height:1.4;padding-right:24px} :root:has(.wt-s, .wt-chrome) #page-container .wt-choice-field label .tag{position:absolute;top:-10px;left:18px;font-family:var(--f-mono);font-size:.58rem;font-style:normal;padding:4px 8px;border-radius:99px;background:var(--red);color:#fff;letter-spacing:.06em;text-transform:uppercase} @media (max-width:600px){:root:has(.wt-s, .wt-chrome) #page-container .wt-choice-field .et_pb_contact_field_options_list{grid-template-columns:1fr}} :root:has(.wt-s, .wt-chrome) #page-container .et_pb_text > .et_pb_text_inner, :root:has(.wt-s, .wt-chrome) #page-container .et_pb_code > .et_pb_code_inner{display:contents} :root:has(.wt-s, .wt-chrome) #page-container .et_pb_text_inner > p:empty{display:none} :root:has(.wt-s, .wt-chrome) #page-container .et_pb_column::before, :root:has(.wt-s, .wt-chrome) #page-container .et_pb_column::after{content:none!important} :root:has(.wt-s, .wt-chrome) #page-container .ico{display:block;flex:none;width:1em;height:1em;background-color:currentColor;-webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat;line-height:0;font-size:0;font-style:normal} :root:has(.wt-s, .wt-chrome) #page-container .btn .ico, :root:has(.wt-s, .wt-chrome) #page-container .link-arrow .ico{display:inline-block} :root:has(.wt-s, .wt-chrome) #page-container .et_builder_inner_content > .et_pb_section + .et_pb_section{border-top:1px solid var(--line-2)} :root:has(.wt-s, .wt-chrome) #page-container .et_builder_inner_content > .wt-chrome + .et_pb_section, :root:has(.wt-s, .wt-chrome) #page-container .et_builder_inner_content > .et_pb_section.wt-raw, :root:has(.wt-s, .wt-chrome) #page-container .et_builder_inner_content > .et_pb_section.wt-sticky, :root:has(.wt-s, .wt-chrome) #page-container .et_builder_inner_content > .et_pb_section.wt-sticky + .et_pb_section{border-top:0} :root:has(.wt-s, .wt-chrome) #page-container .et_pb_row.wt-full{width:100%;max-width:none;padding:0} :root:has(.wt-s, .wt-chrome) #page-container .et_pb_row + .et_pb_row.wt-seq-row{margin-top:28px} :root:has(.wt-s, .wt-chrome) #page-container .et_pb_section.process{padding:clamp(90px,12vw,150px) 0} :root:has(.wt-s, .wt-chrome) #page-container .et_pb_section.process .steps-view{margin-bottom:0} :root:has(.wt-s, .wt-chrome) #page-container .et_pb_row + .et_pb_row > .steps-view{margin-top:0} :root:has(.wt-s, .wt-chrome) #page-container .et_pb_section.wt-sticky{position:sticky;top:92px;z-index:40;background:transparent} :root:has(.wt-s, .wt-chrome) #page-container .et_pb_section.wt-sticky .uc-tabs{position:static;margin-bottom:0} :root:has(.wt-s, .wt-chrome) #page-container .et_pb_section.wt-plain{padding:0} :root:has(.wt-s, .wt-chrome) #page-container .et_pb_section.hero::before, :root:has(.wt-s, .wt-chrome) #page-container .et_pb_section.phero::before, :root:has(.wt-s, .wt-chrome) #page-container .et_pb_section.cta::before{content:"";position:absolute;inset:0;pointer-events:none; background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:64px 64px; -webkit-mask:radial-gradient(ellipse 80% 60% at 50% 30%,#000 30%,transparent 80%);mask:radial-gradient(ellipse 80% 60% at 50% 30%,#000 30%,transparent 80%)} :root:has(.wt-s, .wt-chrome) #page-container .et_pb_section.hero::after, :root:has(.wt-s, .wt-chrome) #page-container .et_pb_section.phero::after{content:"";position:absolute;width:760px;max-width:100%;height:520px;left:50%;top:0;transform:translateX(-50%);border-radius:50%;filter:blur(90px);pointer-events:none;background:radial-gradient(closest-side,rgba(255,40,40,.4),transparent)} :root:has(.wt-s, .wt-chrome) #page-container .et_pb_section.hero::after{top:22%} :root:has(.wt-s, .wt-chrome) #page-container .et_pb_section.cta::after{content:"";position:absolute;left:50%;bottom:-40%;width:1200px;max-width:120%;height:800px;transform:translateX(-50%);border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,rgba(255,45,45,.55),rgba(255,45,45,.12) 50%,transparent);filter:blur(40px)} :root:has(.wt-s, .wt-chrome) #page-container .et_pb_section.hero > .et_pb_row, :root:has(.wt-s, .wt-chrome) #page-container .et_pb_section.phero > .et_pb_row, :root:has(.wt-s, .wt-chrome) #page-container .et_pb_section.cta > .et_pb_row{position:relative;z-index:1} :root:has(.wt-s, .wt-chrome) #page-container .hero-content, :root:has(.wt-s, .wt-chrome) #page-container .cta-inner, :root:has(.wt-s, .wt-chrome) #page-container .phero-center{display:flex;flex-direction:column;align-items:center;text-align:center} :root:has(.wt-s, .wt-chrome) #page-container .et_pb_column.hero-ctas{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;float:none} :root:has(.wt-s, .wt-chrome) #page-container .phero .et_pb_column.hero-ctas{justify-content:flex-start} :root:has(.wt-s, .wt-chrome) #page-container .et_pb_column.hero-ctas.wt-center, :root:has(.wt-s, .wt-chrome) #page-container .et_pb_column.hero-ctas.center{justify-content:center!important} :root:has(.wt-s, .wt-chrome) #page-container .et_pb_row + .et_pb_row > .hero-ctas, :root:has(.wt-s, .wt-chrome) #page-container .et_pb_row + .et_pb_row > .btn-row{margin-top:32px} :root:has(.wt-s, .wt-chrome) #page-container .et_pb_row + .et_pb_row > .hero-content .hero-proof{margin-top:32px} :root:has(.wt-s, .wt-chrome) #page-container .et_pb_row + .et_pb_row > .phero-center{margin-top:0} :root:has(.wt-s, .wt-chrome) #page-container .avatars img{width:34px;height:34px;border-radius:50%;border:2px solid var(--bg);margin-left:-10px;object-fit:cover;display:block} :root:has(.wt-s, .wt-chrome) #page-container .avatars img:first-child{margin-left:0} :root:has(.wt-s, .wt-chrome) #page-container .tcard .tq{font-size:1.05rem;line-height:1.5;color:#e2e1e6} :root:has(.wt-s, .wt-chrome) #page-container .tcard .who{display:flex;align-items:center;gap:12px} :root:has(.wt-s, .wt-chrome) #page-container .tcard img.av{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none} @media (max-width:600px){:root:has(.wt-s, .wt-chrome) #page-container .tcard .tq{font-size:.95rem}} :root:has(.wt-s, .wt-chrome) #page-container .et_pb_row.plans{display:grid} @media (max-width:1100px){:root:has(.wt-s, .wt-chrome) #page-container .et_pb_row.plans{max-width:calc(560px + 2 * var(--gutter))}} :root:has(.wt-s, .wt-chrome) #page-container .et_pb_row.plans::after, :root:has(.wt-s, .wt-chrome) #page-container .et_pb_row.faq-grid::after, :root:has(.wt-s, .wt-chrome) #page-container .et_pb_row.faq-page::after{display:none} :root:has(.wt-s, .wt-chrome) #page-container .et_pb_row.faq-grid, :root:has(.wt-s, .wt-chrome) #page-container .et_pb_row.faq-page{display:grid} :root:has(.wt-s, .wt-chrome) #page-container .plans > .et_pb_column.plan-feat{margin-top:-14px!important} @media (max-width:1100px){:root:has(.wt-s, .wt-chrome) #page-container .plans > .et_pb_column.plan-feat{margin-top:0!important}} :root:has(.wt-s, .wt-chrome) #page-container .plans > .et_pb_column, :root:has(.wt-s, .wt-chrome) #page-container .faq-grid > .et_pb_column, :root:has(.wt-s, .wt-chrome) #page-container .faq-page > .et_pb_column{width:auto!important;margin:0!important;float:none!important} :root:has(.wt-s, .wt-chrome) #page-container .faq-page > .et_pb_column:first-child{position:sticky;top:120px;align-self:start} :root:has(.wt-s, .wt-chrome) #page-container .plan > .et_pb_module{position:static} :root:has(.wt-s, .wt-chrome) #page-container .faq-grid > .et_pb_column:first-child{position:sticky;top:120px;align-self:start} @media (max-width:1100px){:root:has(.wt-s, .wt-chrome) #page-container .faq-grid > .et_pb_column:first-child, :root:has(.wt-s, .wt-chrome) #page-container .faq-page > .et_pb_column:first-child{position:static}} :root:has(.wt-s, .wt-chrome) #page-container .et_pb_column.sec-head-row, :root:has(.wt-s, .wt-chrome) #page-container .et_pb_column.project-strip{display:flex;float:none} :root:has(.wt-s, .wt-chrome) #page-container .et_pb_column.sec-head-row{align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap} @media (min-width:768px){:root:has(.wt-s, .wt-chrome) #page-container .sec-head-row:has(> .et_pb_text_inner > :is(.rating, .btn, .link-arrow):last-child), :root:has(.wt-s, .wt-chrome) #page-container .et_pb_column.sec-head-row:has(> .et_pb_button_module_wrapper:last-child){flex-wrap:nowrap} :root:has(.wt-s, .wt-chrome) #page-container .sec-head-row > .et_pb_text_inner > :first-child, :root:has(.wt-s, .wt-chrome) #page-container .et_pb_column.sec-head-row > :first-child{flex:0 1 auto;min-width:0} :root:has(.wt-s, .wt-chrome) #page-container .sec-head-row > .et_pb_text_inner > :last-child:not(:first-child), :root:has(.wt-s, .wt-chrome) #page-container .et_pb_column.sec-head-row > :last-child:not(:first-child){flex:none} } :root:has(.wt-s, .wt-chrome) #page-container .panel-c1{--a:#ff3b30} :root:has(.wt-s, .wt-chrome) #page-container .panel-c2{--a:#ff6a3d} :root:has(.wt-s, .wt-chrome) #page-container .panel-c3{--a:#ff2d55} :root:has(.wt-s, .wt-chrome) #page-container .panel-c4{--a:#ff8a3d} :root:has(.wt-s, .wt-chrome) #page-container .et_pb_section a.et_pb_button.btn{display:inline-flex!important;align-items:center;justify-content:center;gap:10px;height:48px;padding:0 22px!important;border:0!important;border-radius:999px!important; font-family:var(--f-body)!important;font-size:.95rem!important;font-weight:600!important;letter-spacing:-.01em!important;line-height:1!important;color:var(--text)!important;text-transform:none!important} :root:has(.wt-s, .wt-chrome) #page-container .et_pb_section a.et_pb_button.btn::after, :root:has(.wt-s, .wt-chrome) #page-container .et_pb_section a.et_pb_button.btn::before{display:none!important} :root:has(.wt-s, .wt-chrome) #page-container .et_pb_section a.et_pb_button.btn-arrow::after{display:inline-block!important;content:"→"!important;font-family:var(--f-body)!important;position:static!important;opacity:1!important;margin:0!important;font-size:1.05em!important;line-height:1!important;transition:transform .4s var(--ease)!important} :root:has(.wt-s, .wt-chrome) #page-container .et_pb_section a.et_pb_button.btn-arrow:hover::after{transform:translateX(4px)} :root:has(.wt-s, .wt-chrome) #page-container .et_pb_section a.et_pb_button.btn-red{background:linear-gradient(180deg,#ff4a42,var(--red-2))!important;color:#fff!important;box-shadow:0 0 0 1px rgba(255,120,110,.4) inset,0 10px 30px -10px var(--red-glow)} :root:has(.wt-s, .wt-chrome) #page-container .et_pb_section a.et_pb_button.btn-ghost{background:rgba(255,255,255,.03)!important;border:1px solid var(--line-2)!important} :root:has(.wt-s, .wt-chrome) #page-container .et_pb_section a.et_pb_button.btn-ghost:hover{background:rgba(255,255,255,.06)!important;border-color:rgba(255,255,255,.35)!important} :root:has(.wt-s, .wt-chrome) #page-container .et_pb_section a.et_pb_button.btn-sm{height:40px;padding:0 18px!important;font-size:.875rem!important} :root:has(.wt-s, .wt-chrome) #page-container .et_pb_section a.et_pb_button.btn-lg{height:56px;padding:0 28px!important;font-size:1rem!important} :root:has(.wt-s, .wt-chrome) #page-container .et_pb_section a.et_pb_button.btn-xl{height:64px;padding:0 34px!important;font-size:1.05rem!important} :root:has(.wt-s, .wt-chrome) #page-container .et_pb_section a.et_pb_button.btn-block{width:100%} :root:has(.wt-s, .wt-chrome) #page-container .et_pb_section a.et_pb_button.link-arrow{border:0!important;background:none!important;padding:0!important;font-size:1rem!important;font-weight:500!important;color:var(--text)!important;height:56px;display:inline-flex!important;align-items:center;gap:6px} :root:has(.wt-s, .wt-chrome) #page-container .et_pb_section a.et_pb_button.link-arrow::after{content:"↗"!important;font-family:var(--f-body)!important;position:static!important;opacity:1!important;margin:0!important;font-size:1em!important;display:inline-block!important} @media (max-width:600px){:root:has(.wt-s, .wt-chrome) #page-container .et_pb_section a.et_pb_button.btn-lg, :root:has(.wt-s, .wt-chrome) #page-container .et_pb_section a.et_pb_button.btn-xl{height:54px;padding:0 24px!important;font-size:.95rem!important} :root:has(.wt-s, .wt-chrome) #page-container .hero-ctas > .et_pb_button_module_wrapper{flex:1 1 100%} :root:has(.wt-s, .wt-chrome) #page-container .hero-ctas a.et_pb_button.btn{width:100%} :root:has(.wt-s, .wt-chrome) #page-container .sec-head-row > .et_pb_button_module_wrapper, :root:has(.wt-s, .wt-chrome) #page-container .project-strip > .et_pb_button_module_wrapper{width:100%} } :root:has(.wt-s, .wt-chrome) #page-container .et_pb_toggle{background:transparent!important;border:0!important;border-bottom:1px solid var(--line)!important;padding:0!important;margin:0!important} :root:has(.wt-s, .wt-chrome) #page-container .et_pb_toggle.is-hidden{display:none!important} :root:has(.wt-s, .wt-chrome) #page-container .faq-list > .et_pb_toggle:first-child, :root:has(.wt-s, .wt-chrome) #page-container .accordion > .et_pb_toggle:first-child{border-top:1px solid var(--line)!important} :root:has(.wt-s, .wt-chrome) #page-container .et_pb_toggle .et_pb_toggle_title{position:relative;font-family:var(--f-display)!important;font-weight:500!important;font-size:clamp(1.1rem,1.8vw,1.35rem)!important;letter-spacing:-.02em;line-height:1.3!important;color:var(--text)!important;padding:26px 60px 26px 0!important} :root:has(.wt-s, .wt-chrome) #page-container .et_pb_toggle .et_pb_toggle_title::before{content:"+"!important;font-family:var(--f-body)!important;position:absolute;right:0;top:50%;margin:0!important;transform:translateY(-50%);width:36px;height:36px;border-radius:50%;border:1px solid var(--line-2);text-align:center;line-height:34px;font-size:18px!important;color:var(--text)!important;transition:background .3s,border-color .3s} :root:has(.wt-s, .wt-chrome) #page-container .et_pb_toggle_open .et_pb_toggle_title::before{content:"−"!important;background:var(--red);border-color:var(--red)} :root:has(.wt-s, .wt-chrome) #page-container .et_pb_toggle .et_pb_toggle_content{padding:0 0 26px!important;color:var(--muted)!important;font-size:1rem;line-height:1.6;max-width:62ch} :root:has(.wt-s, .wt-chrome) #page-container .et_pb_toggle .et_pb_toggle_content a{color:var(--red)} :root:has(.wt-s, .wt-chrome) #page-container .et_pb_contact_form_container{position:relative} :root:has(.wt-s, .wt-chrome) #page-container .et_pb_contact_main_title{font-family:var(--f-display)!important;font-weight:600!important;font-size:1.7rem!important;letter-spacing:-.03em;color:var(--text)!important;margin-bottom:22px;padding:0} :root:has(.wt-s, .wt-chrome) #page-container .et_pb_contact_form{margin-left:-3%} :root:has(.wt-s, .wt-chrome) #page-container .et_pb_contact p.et_pb_contact_field{padding-left:3%;margin-bottom:18px} :root:has(.wt-s, .wt-chrome) #page-container .et_pb_contact .input, :root:has(.wt-s, .wt-chrome) #page-container .et_pb_contact select, :root:has(.wt-s, .wt-chrome) #page-container .et_pb_contact textarea{width:100%;font:inherit!important;font-size:1rem!important;color:var(--text)!important;background:var(--bg-2)!important;border:1px solid var(--line-2)!important;border-radius:12px!important;padding:14px 16px!important;outline:none;transition:border-color .25s,box-shadow .25s} :root:has(.wt-s, .wt-chrome) #page-container .et_pb_contact textarea{min-height:140px} :root:has(.wt-s, .wt-chrome) #page-container .et_pb_contact .input:focus, :root:has(.wt-s, .wt-chrome) #page-container .et_pb_contact select:focus, :root:has(.wt-s, .wt-chrome) #page-container .et_pb_contact textarea:focus{border-color:rgba(255,60,50,.7)!important;box-shadow:0 0 0 4px rgba(255,45,45,.12)} :root:has(.wt-s, .wt-chrome) #page-container .et_pb_contact .input::placeholder, :root:has(.wt-s, .wt-chrome) #page-container .et_pb_contact textarea::placeholder{color:var(--dim)} :root:has(.wt-s, .wt-chrome) #page-container .et_pb_contact_form_label{display:none} :root:has(.wt-s, .wt-chrome) #page-container .et_pb_contact_field_options_title{display:block;font-size:.82rem;font-weight:500;color:#c9c8ce;margin-bottom:10px} :root:has(.wt-s, .wt-chrome) #page-container .et_pb_contact_field_options_list{display:flex;flex-wrap:wrap;gap:8px} :root:has(.wt-s, .wt-chrome) #page-container .et_pb_contact_field_radio, :root:has(.wt-s, .wt-chrome) #page-container .et_pb_contact_field_checkbox{margin:0!important;position:relative} :root:has(.wt-s, .wt-chrome) #page-container .et_pb_contact_field_radio input, :root:has(.wt-s, .wt-chrome) #page-container .et_pb_contact_field_checkbox input{position:absolute;top:0;left:0;width:1px;height:1px;opacity:0} :root:has(.wt-s, .wt-chrome) #page-container .et_pb_contact_field_radio label, :root:has(.wt-s, .wt-chrome) #page-container .et_pb_contact_field_checkbox label{display:inline-flex!important;align-items:center;padding:10px 16px!important;border-radius:99px;border:1px solid var(--line-2);background:var(--bg-2);font-size:.88rem!important;color:#c9c8ce!important;cursor:pointer;transition:all .25s;line-height:1.3} :root:has(.wt-s, .wt-chrome) #page-container .et_pb_contact_field_radio label i, :root:has(.wt-s, .wt-chrome) #page-container .et_pb_contact_field_checkbox label i{display:none!important} :root:has(.wt-s, .wt-chrome) #page-container .et_pb_contact_field_radio input:checked + label, :root:has(.wt-s, .wt-chrome) #page-container .et_pb_contact_field_checkbox input:checked + label{background:rgba(255,45,45,.14);border-color:var(--red);color:#fff!important} :root:has(.wt-s, .wt-chrome) #page-container .et_contact_bottom_container{float:none;display:flex;justify-content:flex-end;margin-top:6px} :root:has(.wt-s, .wt-chrome) #page-container .et_pb_contact_submit{display:inline-flex!important;align-items:center;height:56px;padding:0 28px!important;border:0!important;border-radius:999px!important;background:linear-gradient(180deg,#ff4a42,var(--red-2))!important;color:#fff!important;font-family:var(--f-body)!important;font-size:1rem!important;font-weight:600!important;box-shadow:0 10px 30px -10px var(--red-glow);margin:0!important} :root:has(.wt-s, .wt-chrome) #page-container .et_pb_contact_submit::after{display:none!important} :root:has(.wt-s, .wt-chrome) #page-container .et-pb-contact-message{color:#3ddc97;font-size:1rem;margin-bottom:16px} :root:has(.wt-s, .wt-chrome) #page-container .et-pb-contact-message ul{padding-left:0;color:#ff8f88} :root:has(.wt-s, .wt-chrome) #page-container .et_pb_contact_field .et_contact_error{border-color:var(--red)!important} @media (max-width:600px){:root:has(.wt-s, .wt-chrome) #page-container .et_pb_contact p.et_pb_contact_field_half{width:100%;float:none}} :root:has(.wt-s, .wt-chrome) #page-container .wt-news .et_pb_contact_form{display:flex;gap:8px;margin:0;padding:6px;border:1px solid var(--line-2);border-radius:99px;background:var(--bg-2)} :root:has(.wt-s, .wt-chrome) #page-container .wt-news p.et_pb_contact_field{flex:1;padding:0;margin:0;width:auto} :root:has(.wt-s, .wt-chrome) #page-container .wt-news .input{border:0!important;background:none!important;padding:0 16px!important;height:46px} :root:has(.wt-s, .wt-chrome) #page-container .wt-news .et_contact_bottom_container{margin:0} :root:has(.wt-s, .wt-chrome) #page-container .wt-news .et_pb_contact_submit{height:46px} :root:has(.wt-s, .wt-chrome) #page-container .gs-divi .gs-stephead{margin-bottom:20px} :root:has(.wt-s, .wt-chrome) #page-container .gs-divi .gs-nav{clear:both} :root:has(.wt-s, .wt-chrome) #page-container .gs-divi.is-last .gs-nav #gsNext{display:none} :root:has(.wt-s, .wt-chrome) #page-container .gs-divi:not(.is-last) .et_contact_bottom_container{display:none} :root:has(.wt-s, .wt-chrome) #page-container .gs-divi .gs-error{margin:-6px 0 16px 3%} :root:has(.wt-s, .wt-chrome) #page-container .wt-blog .et_pb_post{border-radius:var(--r-lg);border:1px solid var(--line);background:var(--surface);overflow:hidden;padding:0!important;margin-bottom:18px!important;transition:border-color .4s,transform .5s var(--ease)} :root:has(.wt-s, .wt-chrome) #page-container .wt-blog .et_pb_post:hover{border-color:rgba(255,60,50,.4);transform:translateY(-5px)} :root:has(.wt-s, .wt-chrome) #page-container .wt-blog .et_pb_image_container{margin:0!important} :root:has(.wt-s, .wt-chrome) #page-container .wt-blog .et_pb_image_container img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block} :root:has(.wt-s, .wt-chrome) #page-container .wt-blog .entry-title{font-family:var(--f-display)!important;font-weight:600!important;font-size:1.28rem!important;letter-spacing:-.025em;line-height:1.2!important;padding:22px 24px 0!important} :root:has(.wt-s, .wt-chrome) #page-container .wt-blog .entry-title a{color:var(--text)!important} :root:has(.wt-s, .wt-chrome) #page-container .wt-blog .post-meta{padding:10px 24px 0!important;font-family:var(--f-mono);font-size:.68rem!important;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)!important} :root:has(.wt-s, .wt-chrome) #page-container .wt-blog .post-meta a{color:#ff8f88!important} :root:has(.wt-s, .wt-chrome) #page-container .wt-blog .post-content{padding:12px 24px 26px!important;color:var(--muted);font-size:.92rem} :root:has(.wt-s, .wt-chrome) #page-container .wt-blog .more-link{display:inline-block;margin-top:12px;color:var(--text)!important;font-weight:600} :root:has(.wt-s, .wt-chrome) #page-container .wt-blog .pagination a{color:var(--text)!important} :root:has(.wt-s, .wt-chrome) #page-container .et_pb_row + .et_pb_row .wt-blog{margin-top:56px} :root:has(.wt-s, .wt-chrome).wt-js body:not(.wt-ready) #page-container .et_pb_section.hero > .et_pb_row{opacity:0;animation:wt-show 0s 2.5s forwards} @keyframes wt-show{to{opacity:1}} :root:has(.wt-s, .wt-chrome) body.et-fb #page-container .wt-nav{position:relative} :root:has(.wt-s, .wt-chrome) body.et-fb #page-container .curtain, :root:has(.wt-s, .wt-chrome) body.et-fb #page-container .cursor, :root:has(.wt-s, .wt-chrome) body.et-fb #page-container .grain, :root:has(.wt-s, .wt-chrome) body.et-fb #page-container .loader{display:none!important} :root:has(.wt-s, .wt-chrome) body.et-fb #page-container .wt-nav{position:relative} :root:has(.wt-s, .wt-chrome) body.et-fb #page-container .et_pb_section.hero > .et_pb_row{opacity:1!important;animation:none!important} :root:has(.wt-s, .wt-chrome) body.et-fb #page-container .panel-body{opacity:1!important;transform:none!important} :root:has(.wt-s, .wt-chrome) #page-container .et_pb_section.wt-sty-1, :root:has(.wt-s, .wt-chrome) #page-container .wt-sty-1{--a:#ff3b30} :root:has(.wt-s, .wt-chrome) #page-container .et_pb_section.wt-sty-2, :root:has(.wt-s, .wt-chrome) #page-container .wt-sty-2{--a:#ff6a3d} :root:has(.wt-s, .wt-chrome) #page-container .et_pb_section.wt-sty-3, :root:has(.wt-s, .wt-chrome) #page-container .wt-sty-3{--a:#ff2d55} :root:has(.wt-s, .wt-chrome) #page-container .et_pb_section.wt-sty-4, :root:has(.wt-s, .wt-chrome) #page-container .wt-sty-4{--a:#ff8a3d} :root:has(.wt-s, .wt-chrome) #page-container .et_pb_section.wt-sty-5, :root:has(.wt-s, .wt-chrome) #page-container .wt-sty-5{background-image:url('https://www.wutini.com/wp-content/uploads/2026/10/photo-1601506521793-dc748fc80b67-2.avif')} :root:has(.wt-s, .wt-chrome) #page-container .et_pb_section.wt-sty-6, :root:has(.wt-s, .wt-chrome) #page-container .wt-sty-6{right:0;top:12%} :root:has(.wt-s, .wt-chrome) #page-container .et_pb_section.wt-sty-7, :root:has(.wt-s, .wt-chrome) #page-container .wt-sty-7{justify-content:center} :root:has(.wt-s, .wt-chrome) #page-container .et_pb_section.wt-sty-8, :root:has(.wt-s, .wt-chrome) #page-container .wt-sty-8{padding-top:0} :root:has(.wt-s, .wt-chrome) #page-container .et_pb_section.wt-sty-9, :root:has(.wt-s, .wt-chrome) #page-container .wt-sty-9{padding:80px 0} :root:has(.wt-s, .wt-chrome) #page-container .et_pb_section.wt-sty-10, :root:has(.wt-s, .wt-chrome) #page-container .wt-sty-10{padding-top:20px} :root:has(.wt-s, .wt-chrome) #page-container .et_pb_section.wt-sty-11, :root:has(.wt-s, .wt-chrome) #page-container .wt-sty-11{padding-bottom:0} :root:has(.wt-s, .wt-chrome) #page-container .et_pb_section.wt-sty-12, :root:has(.wt-s, .wt-chrome) #page-container .wt-sty-12{grid-template-columns:1fr;gap:26px;text-align:left} :root:has(.wt-s, .wt-chrome) #page-container .et_pb_section.wt-sty-13, :root:has(.wt-s, .wt-chrome) #page-container .wt-sty-13{padding-top:40px} :root:has(.wt-s, .wt-chrome) #page-container .et_pb_section.wt-sty-14, :root:has(.wt-s, .wt-chrome) #page-container .wt-sty-14{padding-bottom:60px} :root:has(.wt-s, .wt-chrome) #page-container .et_pb_section.wt-sty-15, :root:has(.wt-s, .wt-chrome) #page-container .wt-sty-15{margin-bottom:26px}