@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800;900&display=swap');

:root {
    color-scheme: dark;
    --wf-bg: #020607;
    --wf-text: #edfdf8;
    --wf-muted: #91aaa5;
    --wf-soft: #c6fff0;
    --wf-emerald: #38f5b7;
    --wf-cyan: #4fc3ff;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    min-height: 100vh;
    color: var(--wf-text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background:
        radial-gradient(circle at 12% 0%, rgba(56,245,183,.22), transparent 26rem),
        radial-gradient(circle at 86% 8%, rgba(79,195,255,.16), transparent 30rem),
        linear-gradient(135deg, #010405 0%, #071115 48%, #020506 100%);
    overflow-x: hidden;
}
body::before,
body::after { content: ""; position: fixed; inset: 0; pointer-events: none; }
body::before {
    background-image: linear-gradient(rgba(255,255,255,.026) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.026) 1px, transparent 1px);
    background-size: 52px 52px;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.88), rgba(0,0,0,.20) 70%, transparent);
    animation: wfGridDrift 26s linear infinite;
}
body::after { background: linear-gradient(115deg, transparent 0%, rgba(56,245,183,.028) 45%, transparent 70%); mix-blend-mode: screen; }
a { color: inherit; text-decoration: none; }

.wf-shell { width: min(1160px, calc(100% - 32px)); margin: 0 auto; position: relative; z-index: 1; }
.wf-header {
    position: sticky;
    top: 12px;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px solid rgba(90,255,211,.14);
    border-radius: 999px;
    background: rgba(3,9,11,.62);
    backdrop-filter: blur(22px);
    box-shadow: 0 16px 54px rgba(0,0,0,.26);
}
.wf-brand { display: inline-flex; align-items: center; gap: 11px; min-width: max-content; }
.wf-brand-mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: #03130d; font-size: 13px; font-weight: 1000; background: radial-gradient(circle at 35% 25%, #dffff4, var(--wf-emerald) 38%, #11785c 100%); }
.wf-brand strong, .wf-brand small { display: block; }
.wf-brand strong { font-weight: 900; letter-spacing: -.03em; font-size: 15px; }
.wf-brand small { color: var(--wf-muted); font-size: 10px; margin-top: 1px; }
.wf-brand--header-logo { min-width: 220px; max-width: 300px; height: 42px; overflow: visible; }
.wf-header-logo { display: block; width: auto; max-width: 290px; height: 42px; object-fit: contain; object-position: left center; filter: drop-shadow(0 0 16px rgba(56,245,183,.14)) drop-shadow(0 0 12px rgba(255,255,255,.08)); }
.wf-nav { display: flex; align-items: center; gap: 13px; color: var(--wf-muted); font-size: 12px; }
.wf-nav a { transition: color .18s ease, transform .18s ease; }
.wf-nav a:hover { color: var(--wf-text); }
.wf-nav-cta { padding: 9px 13px; border: 1px solid rgba(90,255,211,.25); border-radius: 999px; color: var(--wf-text) !important; background: linear-gradient(135deg, rgba(56,245,183,.13), rgba(79,195,255,.08)); }
.wf-header-tools { display: inline-flex; align-items: center; gap: 10px; }
.wf-language-preview { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 7px 10px; border: 1px solid rgba(90,255,211,.18); border-radius: 999px; background: rgba(255,255,255,.035); }
.wf-lang-active, .wf-lang-soon { display: inline-flex; align-items: center; justify-content: center; min-height: 24px; padding: 4px 8px; border-radius: 999px; font-size: 11px; font-weight: 900; line-height: 1; }
.wf-lang-active { color: #03130e; background: linear-gradient(135deg, var(--wf-emerald), var(--wf-cyan)); }
.wf-lang-soon { color: var(--wf-muted); border: 1px solid rgba(90,255,211,.12); background: rgba(0,0,0,.18); }
.wf-register-cta, .wf-login-link, .wf-logout-button { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 18px; border-radius: 999px; font-weight: 900; text-decoration: none; }
.wf-register-cta { color: #03130e; background: linear-gradient(135deg, var(--wf-emerald), var(--wf-cyan)); box-shadow: 0 0 26px rgba(90,255,211,.16); }
.wf-login-link, .wf-logout-button { color: var(--wf-text); border: 1px solid rgba(90,255,211,.18); background: rgba(255,255,255,.025); }
.wf-logout-form { display: inline-flex; margin: 0; }
.wf-logout-button { cursor: pointer; }

.wf-hero-2050 { display: grid; grid-template-columns: minmax(0,.98fr) minmax(360px,.82fr); gap: 42px; align-items: center; min-height: 585px; padding: 64px 0 38px; }
.wf-kicker { display: inline-flex; align-items: center; gap: 8px; color: var(--wf-emerald); text-transform: uppercase; letter-spacing: .18em; font-size: 10px; font-weight: 1000; }
.wf-kicker::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--wf-emerald); box-shadow: 0 0 16px rgba(56,245,183,.9); }
.wf-hero-title, .wf-page-hero h1 { margin: 14px 0 18px; font-size: clamp(38px, 4.8vw, 66px); line-height: .94; letter-spacing: -.065em; font-weight: 1000; }
.wf-gradient-text { background: linear-gradient(100deg, #fff 0%, #dffdf5 36%, #72ffd3 68%, #73caff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wf-hero-text, .wf-page-hero p { max-width: 650px; margin: 0; color: var(--wf-muted); font-size: clamp(15px, 1.35vw, 18px); line-height: 1.65; }
.wf-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.wf-button { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 11px 16px; border-radius: 999px; border: 1px solid transparent; font-size: 12px; font-weight: 900; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease; }
.wf-button:hover { transform: translateY(-2px); }
.wf-button-primary { color: #03130e; background: linear-gradient(135deg, var(--wf-emerald), var(--wf-cyan)); box-shadow: 0 0 24px rgba(56,245,183,.24), 0 16px 52px rgba(79,195,255,.10); }
.wf-button-secondary { color: var(--wf-text); border-color: rgba(90,255,211,.22); background: rgba(255,255,255,.045); }
.wf-hero-metrics { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 24px; }
.wf-metric { padding: 9px 11px; border: 1px solid rgba(90,255,211,.14); border-radius: 14px; background: rgba(255,255,255,.035); }
.wf-metric strong { display: block; color: var(--wf-soft); font-size: 13px; }
.wf-metric span { display: block; color: var(--wf-muted); font-size: 10px; margin-top: 2px; }

.wf-core-panel { position: relative; min-height: 430px; border: 1px solid rgba(90,255,211,.18); border-radius: 30px; background: radial-gradient(circle at 50% 40%, rgba(56,245,183,.18), transparent 24%), radial-gradient(circle at 50% 50%, rgba(79,195,255,.12), transparent 40%), rgba(5,16,19,.62); box-shadow: 0 30px 96px rgba(0,0,0,.42), inset 0 0 80px rgba(56,245,183,.03); overflow: hidden; backdrop-filter: blur(18px); }
.wf-core-panel::before { content: ""; position: absolute; inset: 20px; border: 1px solid rgba(90,255,211,.14); border-radius: 24px; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size: 30px 30px; }
.wf-orbit { position: absolute; inset: 62px; border: 1px solid rgba(90,255,211,.14); border-radius: 50%; animation: wfSpin 34s linear infinite; }
.wf-orbit:nth-child(2) { inset: 100px; animation-duration: 25s; animation-direction: reverse; border-color: rgba(79,195,255,.13); }
.wf-orbit:nth-child(3) { inset: 36px; animation-duration: 46s; border-style: dashed; opacity: .68; }
.wf-core { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 136px; height: 136px; transform: translate(-50%, -50%); border-radius: 50%; color: #eafff8; font-weight: 1000; text-align: center; letter-spacing: -.04em; font-size: 14px; background: radial-gradient(circle at 35% 20%, #fff, #a9ffe6 15%, #38f5b7 38%, #124f4a 72%, #061013 100%); box-shadow: 0 0 56px rgba(56,245,183,.42), 0 0 120px rgba(79,195,255,.18), inset 0 0 30px rgba(255,255,255,.18); animation: wfPulse 4.8s ease-in-out infinite; }
.wf-core--brand { width: 172px; height: 172px; background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.16), transparent 34%), radial-gradient(circle at 50% 50%, rgba(56,245,183,.20), rgba(8,25,24,.74) 72%, rgba(0,0,0,.48) 100%); border: 1px solid rgba(90,255,211,.22); }
.wf-core-logo { display: block; width: 150px; height: 150px; object-fit: contain; filter: drop-shadow(0 0 18px rgba(255,255,255,.22)) drop-shadow(0 0 24px rgba(56,245,183,.16)); }
.wf-chip { position: absolute; z-index: 2; padding: 8px 11px; border: 1px solid rgba(90,255,211,.22); border-radius: 999px; color: var(--wf-soft); font-size: 11px; font-weight: 800; background: rgba(4,13,16,.76); box-shadow: 0 0 22px rgba(56,245,183,.10); backdrop-filter: blur(14px); animation: wfFloat 5.2s ease-in-out infinite; }
.wf-chip:nth-of-type(1) { top: 52px; left: 46%; }
.wf-chip:nth-of-type(2) { top: 106px; right: 42px; animation-delay: -.7s; }
.wf-chip:nth-of-type(3) { right: 62px; bottom: 126px; animation-delay: -1.4s; }
.wf-chip:nth-of-type(4) { bottom: 58px; left: 45%; animation-delay: -2.1s; }
.wf-chip:nth-of-type(5) { left: 46px; bottom: 124px; animation-delay: -2.8s; }
.wf-chip:nth-of-type(6) { left: 38px; top: 112px; animation-delay: -3.5s; }
.wf-core-status { position: absolute; left: 20px; right: 20px; bottom: 20px; display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; }
.wf-core-status div { padding: 10px; border: 1px solid rgba(90,255,211,.14); border-radius: 14px; background: rgba(0,0,0,.24); }
.wf-core-status span { display: block; color: var(--wf-muted); font-size: 9px; text-transform: uppercase; letter-spacing: .11em; }
.wf-core-status strong { display: block; margin-top: 4px; color: var(--wf-emerald); font-size: 11px; }

.wf-section { position: relative; margin: 22px 0; padding: 28px; border: 1px solid rgba(90,255,211,.16); border-radius: 28px; background: linear-gradient(135deg, rgba(13,31,35,.80), rgba(5,13,16,.76)); box-shadow: 0 22px 82px rgba(0,0,0,.30), inset 0 0 66px rgba(56,245,183,.022); backdrop-filter: blur(18px); overflow: hidden; }
.wf-section::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg, transparent, rgba(56,245,183,.048), transparent 58%); opacity: .52; }
.wf-section > * { position: relative; z-index: 1; }
.wf-section h2 { margin: 8px 0 12px; font-size: clamp(26px, 3.2vw, 40px); line-height: 1.04; letter-spacing: -.052em; }
.wf-section-lead, .wf-section p, .wf-card p { color: var(--wf-muted); line-height: 1.68; font-size: 14px; }
.wf-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 20px; }
.wf-card { padding: 20px; border: 1px solid rgba(90,255,211,.15); border-radius: 22px; background: rgba(5,15,18,.66); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.wf-card:hover { transform: translateY(-3px); border-color: rgba(90,255,211,.34); box-shadow: 0 0 32px rgba(56,245,183,.11); }
.wf-card h3 { margin: 0 0 10px; font-size: 18px; letter-spacing: -.035em; }
.wf-public-polish-section .wf-card h3::before { content: "✦"; display: inline-block; margin-right: 8px; color: var(--wf-emerald); font-size: 12px; transform: translateY(-1px); }
.wf-positioning-strip { display: flex; flex-wrap: wrap; gap: 8px; margin: -2px 0 22px; }
.wf-positioning-strip span { padding: 8px 11px; border: 1px solid rgba(90,255,211,.16); border-radius: 999px; color: var(--wf-soft); background: rgba(255,255,255,.035); font-size: 10px; font-weight: 800; }
.wf-pipeline-2050 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 20px; }
.wf-pipeline-node { position: relative; min-height: 148px; padding: 18px; border: 1px solid rgba(90,255,211,.15); border-radius: 20px; background: rgba(5,15,18,.62); }
.wf-pipeline-node::after { content: ""; position: absolute; top: 30px; right: -10px; width: 10px; height: 1px; background: linear-gradient(90deg, rgba(90,255,211,.44), transparent); }
.wf-pipeline-node:last-child::after { display: none; }
.wf-pipeline-num { color: var(--wf-emerald); font-size: 10px; font-weight: 1000; letter-spacing: .14em; }
.wf-pipeline-node h3 { margin: 16px 0 8px; font-size: 18px; letter-spacing: -.04em; }
.wf-case-cockpit { display: grid; grid-template-columns: 1fr .84fr; gap: 22px; align-items: center; }
.wf-case-mini { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.wf-case-mini span, .wf-ecosystem-item { padding: 12px; border: 1px solid rgba(90,255,211,.16); border-radius: 16px; background: rgba(0,0,0,.20); color: var(--wf-soft); font-size: 13px; font-weight: 800; }
.wf-ecosystem { display: grid; grid-template-columns: 1fr 190px 1fr; gap: 16px; align-items: center; margin-top: 20px; }
.wf-ecosystem-side { display: grid; gap: 10px; }
.wf-ecosystem-core { display: grid; place-items: center; min-height: 190px; border-radius: 50%; border: 1px solid rgba(90,255,211,.28); color: var(--wf-soft); font-weight: 1000; text-align: center; background: radial-gradient(circle, rgba(56,245,183,.19), rgba(79,195,255,.07), rgba(0,0,0,.22)); }
.wf-mockup-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 20px; }
.wf-product-mockup { min-height: 250px; padding: 18px; border: 1px solid rgba(90,255,211,.17); border-radius: 22px; background: radial-gradient(circle at 20% 0%, rgba(56,245,183,.12), transparent 38%), rgba(3,12,15,.74); box-shadow: inset 0 0 38px rgba(79,195,255,.035); }
.wf-mockup-topline { display: flex; gap: 6px; margin-bottom: 18px; }
.wf-mockup-topline span { width: 8px; height: 8px; border-radius: 50%; background: rgba(90,255,211,.38); }
.wf-product-mockup h3 { margin: 0 0 10px; font-size: 18px; letter-spacing: -.035em; }
.wf-product-mockup p { color: var(--wf-muted); font-size: 13px; line-height: 1.6; }
.wf-mockup-rows { display: grid; gap: 8px; margin-top: 16px; }
.wf-mockup-rows span { display: block; height: 30px; padding: 8px 10px; border: 1px solid rgba(90,255,211,.12); border-radius: 10px; color: var(--wf-soft); background: rgba(0,0,0,.22); font-size: 11px; font-weight: 800; }

.wf-lead-section { display: grid; grid-template-columns: .86fr 1.14fr; gap: 24px; align-items: start; }
.wf-lead-console { border-color: rgba(90,255,211,.24); background: linear-gradient(135deg, rgba(56,245,183,.105), rgba(79,195,255,.075)), rgba(5,15,18,.78); }
.wf-lead-form { display: grid; gap: 12px; }
.wf-lead-form label { display: grid; gap: 7px; color: var(--wf-muted); font-size: 11px; font-weight: 700; }
.wf-lead-form input, .wf-lead-form textarea { width: 100%; border: 1px solid rgba(90,255,211,.16); border-radius: 14px; padding: 12px; color: var(--wf-text); background: rgba(0,0,0,.26); outline: none; }
.wf-lead-form input:focus, .wf-lead-form textarea:focus { border-color: rgba(56,245,183,.62); box-shadow: 0 0 0 3px rgba(56,245,183,.08); }
.wf-lead-form .wf-button { width: 100%; }
.wf-alert { margin-bottom: 12px; padding: 12px 13px; border-radius: 14px; }
.wf-alert-success { color: #042018; background: rgba(56,245,183,.82); }
.wf-alert-error { color: #fff; background: rgba(239,68,68,.78); }
.wf-page-hero { padding: 66px 0 28px; }
.wf-page-hero h1 { font-size: clamp(36px, 4.6vw, 58px); }
.wf-legal-body { color: var(--wf-muted); line-height: 1.82; }
.wf-legal-list ul { margin: 16px 0 0; padding-left: 22px; color: var(--wf-muted); line-height: 1.75; }

.wf-cinematic-cta { display: grid; grid-template-columns: minmax(0,.92fr) minmax(360px,.68fr); gap: 28px; align-items: stretch; background: radial-gradient(circle at 78% 30%, rgba(79,195,255,.16), transparent 28rem), radial-gradient(circle at 20% 0%, rgba(56,245,183,.16), transparent 24rem), linear-gradient(135deg, rgba(13,31,35,.86), rgba(5,13,16,.82)); }
.wf-cinematic-copy { display: flex; flex-direction: column; justify-content: center; min-height: 280px; }
.wf-cinematic-points { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.wf-cinematic-points span { padding: 8px 11px; border: 1px solid rgba(90,255,211,.16); border-radius: 999px; color: var(--wf-soft); background: rgba(0,0,0,.22); font-size: 10px; font-weight: 850; }
.wf-cinematic-media { position: relative; min-height: 300px; border: 1px solid rgba(90,255,211,.22); border-radius: 26px; overflow: hidden; background: radial-gradient(circle at 50% 45%, rgba(56,245,183,.20), transparent 26%), radial-gradient(circle at 70% 20%, rgba(79,195,255,.16), transparent 30%), linear-gradient(135deg, rgba(1,8,10,.92), rgba(5,18,22,.88)); box-shadow: 0 24px 80px rgba(0,0,0,.34), inset 0 0 70px rgba(56,245,183,.06); }
.wf-cinematic-media::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 34px 34px; mask-image: radial-gradient(circle at 50% 45%, rgba(0,0,0,.92), transparent 72%); }
.wf-cinematic-media video, .wf-cinematic-media img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; min-height: 300px; object-fit: cover; }
.wf-cinematic-placeholder { position: relative; z-index: 1; display: grid; place-items: center; align-content: center; gap: 12px; height: 100%; min-height: 300px; padding: 28px; text-align: center; }
.wf-cinematic-play { display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%; color: #03130e; font-size: 24px; background: linear-gradient(135deg, var(--wf-emerald), var(--wf-cyan)); box-shadow: 0 0 42px rgba(56,245,183,.34), 0 0 90px rgba(79,195,255,.16); }
.wf-cinematic-placeholder strong { display: block; font-size: 22px; letter-spacing: -.04em; }
.wf-cinematic-placeholder span { max-width: 320px; color: var(--wf-muted); line-height: 1.6; }

.wf-footer { display: flex; justify-content: space-between; gap: 24px; padding: 44px 0 54px; color: var(--wf-muted); font-size: 12px; }
.wf-footer strong, .wf-footer span { display: block; }
.wf-footer-links { display: flex; flex-wrap: wrap; gap: 12px; }

@keyframes wfSpin { to { transform: rotate(360deg); } }
@keyframes wfPulse { 0%,100% { transform: translate(-50%,-50%) scale(1); } 50% { transform: translate(-50%,-50%) scale(1.04); } }
@keyframes wfFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes wfGridDrift { to { background-position: 52px 52px; } }

@media (max-width: 980px) {
    .wf-hero-2050 { grid-template-columns: 1fr; min-height: auto; padding-top: 52px; }
    .wf-core-panel { min-height: 420px; }
    .wf-card-grid, .wf-pipeline-2050, .wf-case-cockpit, .wf-ecosystem, .wf-lead-section, .wf-mockup-grid, .wf-cinematic-cta { grid-template-columns: 1fr; }
    .wf-pipeline-node::after { display: none; }
    .wf-ecosystem-core { border-radius: 28px; min-height: 160px; }
}
@media (max-width: 720px) {
    .wf-shell { width: min(100% - 24px, 1160px); }
    .wf-header { align-items: flex-start; flex-direction: column; border-radius: 26px; }
    .wf-header-tools { flex-wrap: wrap; }
    .wf-brand--header-logo { min-width: 180px; max-width: 240px; height: 36px; }
    .wf-header-logo { max-width: 238px; height: 36px; }
    .wf-nav { flex-wrap: wrap; }
    .wf-hero-title { font-size: clamp(36px, 12vw, 52px); }
    .wf-hero-text { font-size: 15px; }
    .wf-core-status { grid-template-columns: 1fr; position: static; }
    .wf-chip { position: static; display: inline-flex; margin: 5px; animation: none; }
    .wf-core-panel { display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 22px; min-height: auto; }
    .wf-core-panel::before, .wf-orbit { display: none; }
    .wf-core { position: relative; top: auto; left: auto; transform: none; margin: 18px auto; width: 128px; height: 128px; }
    .wf-core--brand { width: 158px; height: 158px; }
    .wf-core-logo { width: 136px; height: 136px; }
    .wf-section { padding: 22px; border-radius: 24px; }
    .wf-footer { flex-direction: column; }
}