:root { --ink:#1c1917; --ink-soft:#4f4945; --muted:#746c66; --ivory:#f7f6f4; --surface:#fffdfb; --line:#e8e1dc; --coral:#f0643e; --coral-dark:#c94727; --navy:#10293f; --teal:#259a90; --focus:#0b57d0; color-scheme:light; }
* { box-sizing:border-box; }
html { min-width:320px; }
body { margin:0; min-height:100vh; display:flex; flex-direction:column; color:var(--ink); background:var(--ivory); font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; }
.shell { width:min(1180px,calc(100% - 48px)); margin:0 auto; }
.skip-link { position:fixed; z-index:20; top:12px; left:12px; padding:10px 14px; border-radius:8px; background:var(--ink); color:white; transform:translateY(-160%); }
.skip-link:focus { transform:translateY(0); }
.site-header { position:relative; z-index:5; border-bottom:1px solid rgba(232,225,220,.78); background:rgba(247,246,244,.88); backdrop-filter:blur(14px); }
.header-inner { min-height:82px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand { display:inline-flex; align-items:center; gap:10px; color:var(--navy); font-size:22px; font-weight:760; letter-spacing:-.04em; text-decoration:none; }
.brand-mark { width:31px; height:31px; }
.brand-mark path { fill:none; stroke:var(--coral); stroke-width:3.5; stroke-linecap:round; stroke-linejoin:round; }
.environment-label { display:inline-flex; align-items:center; gap:9px; color:var(--ink-soft); font-size:13px; font-weight:650; }
.environment-label span { width:8px; height:8px; border-radius:50%; background:var(--teal); box-shadow:0 0 0 4px rgba(37,154,144,.12); }
main { flex:1; display:flex; }
.hero { position:relative; isolation:isolate; width:100%; min-height:680px; display:flex; align-items:center; overflow:hidden; background:radial-gradient(circle at 1px 1px,rgba(28,25,23,.055) 1px,transparent 0) 0 0/24px 24px,linear-gradient(135deg,#f7f6f4 0%,#f4f0ec 60%,#eef5f3 100%); }
.hero::before { content:""; position:absolute; z-index:-1; inset:0; background:linear-gradient(90deg,rgba(247,246,244,.96) 0%,rgba(247,246,244,.7) 48%,transparent 76%); }
.hero-orb { position:absolute; z-index:-2; border-radius:50%; filter:blur(2px); }
.hero-orb-coral { width:460px; height:460px; top:-210px; left:-120px; background:radial-gradient(circle,rgba(240,100,62,.2),transparent 70%); }
.hero-orb-teal { width:560px; height:560px; right:-180px; bottom:-280px; background:radial-gradient(circle,rgba(37,154,144,.18),transparent 70%); }
.hero-grid { display:grid; grid-template-columns:minmax(0,1.08fr) minmax(360px,.72fr); gap:clamp(64px,9vw,126px); align-items:center; padding:78px 0 88px; }
.hero-copy { max-width:680px; }
.eyebrow { margin:0 0 24px; display:flex; align-items:center; gap:11px; color:var(--coral-dark); font-size:13px; font-weight:780; letter-spacing:.13em; text-transform:uppercase; }
.eyebrow span { width:28px; height:2px; background:var(--coral); }
h1 { max-width:650px; margin:0; color:var(--navy); font-size:clamp(48px,5.4vw,76px); line-height:.99; letter-spacing:-.058em; font-weight:710; }
.lead { max-width:610px; margin:30px 0 0; color:var(--ink-soft); font-size:clamp(18px,1.6vw,21px); line-height:1.58; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:38px; }
.button { min-height:52px; display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:0 21px; border:1px solid transparent; border-radius:12px; font-size:15px; font-weight:720; text-decoration:none; transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease; }
.button svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.button-primary { color:white; background:var(--coral); box-shadow:0 10px 24px rgba(201,71,39,.22); }
.button-primary:hover { color:white; background:var(--coral-dark); transform:translateY(-2px); }
.button-secondary { color:var(--navy); border-color:#d9d1cb; background:rgba(255,253,251,.68); }
.button-secondary:hover { background:var(--surface); transform:translateY(-2px); }
.button:focus-visible { outline:3px solid var(--focus); outline-offset:4px; }
.support-note { margin:22px 0 0; color:var(--muted); font-size:13px; line-height:1.55; }
.flow-card { position:relative; padding:23px; border:1px solid rgba(216,207,200,.84); border-radius:24px; background:rgba(255,253,251,.82); box-shadow:0 26px 70px rgba(16,41,63,.12),inset 0 1px rgba(255,255,255,.9); backdrop-filter:blur(14px); }
.flow-card::before { content:""; position:absolute; inset:-10px 18px auto; height:10px; border:1px solid rgba(216,207,200,.6); border-bottom:0; border-radius:18px 18px 0 0; background:rgba(255,253,251,.45); }
.flow-card-head { display:flex; justify-content:space-between; gap:16px; margin-bottom:22px; color:var(--muted); font-size:12px; font-weight:730; letter-spacing:.04em; text-transform:uppercase; }
.status { display:flex; align-items:center; gap:7px; color:#18766e; }
.status i { width:7px; height:7px; border-radius:50%; background:var(--teal); box-shadow:0 0 0 4px rgba(37,154,144,.1); }
.flow-stage { display:grid; grid-template-columns:54px 1fr; gap:16px; align-items:center; padding:18px; border:1px solid var(--line); border-radius:16px; background:rgba(255,255,255,.72); }
.flow-stage small { display:block; margin-bottom:3px; color:var(--muted); font-size:10px; font-weight:760; letter-spacing:.1em; }
.flow-stage strong { display:block; color:var(--navy); font-size:16px; }
.flow-stage p { margin:4px 0 0; color:var(--muted); font-size:12px; }
.stage-icon { width:52px; height:52px; display:grid; place-items:center; border-radius:14px; }
.stage-icon svg { width:28px; height:28px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.source { gap:3px; align-content:center; background:#fff0eb; }
.source span { display:block; height:4px; border-radius:4px; background:var(--coral); }
.source span:nth-child(1) { width:24px; }
.source span:nth-child(2) { width:17px; }
.source span:nth-child(3) { width:21px; }
.transform { color:#315f89; background:#edf4fa; }
.target { color:#18766e; background:#e7f5f2; }
.flow-line { width:2px; height:19px; margin-left:43px; background:#ddd5cf; }
.flow-line span { display:block; width:6px; height:6px; margin-left:-2px; border-radius:50%; background:var(--coral); animation:flow 2.2s ease-in-out infinite; }
.site-footer { border-top:1px solid var(--line); background:#f2efec; }
.footer-inner { min-height:72px; display:flex; align-items:center; justify-content:space-between; gap:24px; color:var(--muted); font-size:12px; }
@keyframes flow { 0%,100% { transform:translateY(1px); opacity:.25; } 50% { transform:translateY(12px); opacity:1; } }
@media (max-width:860px) { .hero { min-height:auto; } .hero-grid { grid-template-columns:1fr; gap:64px; padding:66px 0 76px; } .hero-copy { max-width:720px; } .flow-card { width:min(100%,520px); } }
@media (max-width:560px) { .shell { width:min(100% - 32px,1180px); } .header-inner { min-height:70px; } .environment-label { font-size:0; } .environment-label span { width:9px; height:9px; } .hero-grid { gap:52px; padding:54px 0 62px; } h1 { font-size:clamp(42px,13vw,58px); } .lead { margin-top:24px; font-size:17px; } .hero-actions { margin-top:30px; flex-direction:column; } .button { width:100%; } .flow-card { padding:16px; border-radius:20px; } .flow-stage { padding:15px; grid-template-columns:48px 1fr; gap:13px; } .stage-icon { width:46px; height:46px; } .flow-line { margin-left:39px; } .footer-inner { min-height:84px; flex-direction:column; align-items:flex-start; justify-content:center; gap:6px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation:none!important; transition:none!important; } }