:root { --ink:#17181c; --muted:#6b707b; --line:#e8eaf0; --blue:#3f6df6; --violet:#8b5cf6; --bg:#fff; }
    * { box-sizing:border-box; }
    body { margin:0; min-width:320px; font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--ink); background:var(--bg); }
    .shell { max-width:1240px; margin:auto; padding:0 32px; }
    header { height:84px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
    .brand { display:flex; align-items:center; gap:10px; font-size:21px; font-weight:750; letter-spacing:-.7px; }
    .mark { width:28px; height:28px; border-radius:9px; background:linear-gradient(145deg,#3264ec,#8a64f7); position:relative; overflow:hidden; }
    .mark::after { content:""; position:absolute; width:18px; height:18px; border:3px solid #fff; border-left-color:transparent; border-radius:50%; left:4px; top:3px; transform:rotate(-30deg); opacity:.95; }
    nav { display:flex; gap:28px; color:#777c86; font-size:14px; }
    nav span { white-space:nowrap; }
    .disabled { color:#a0a5af; border:1px solid #e3e6ed; background:#fafbfc; padding:10px 17px; border-radius:12px; font-size:14px; }
    main { min-height:calc(100vh - 160px); display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:54px; padding:74px 0 82px; }
    h1 { max-width:620px; font-size:clamp(44px,5.3vw,78px); line-height:.98; letter-spacing:-.065em; margin:0 0 24px; font-weight:760; text-wrap:balance; }
    .lead { max-width:490px; margin:0 0 32px; font-size:18px; line-height:1.55; color:var(--muted); text-wrap:pretty; }
    .actions { display:flex; gap:12px; flex-wrap:wrap; }
    .button { border:0; border-radius:14px; padding:14px 21px; color:#fff; font:600 15px inherit; background:linear-gradient(115deg,var(--blue),#5d5ce8); box-shadow:0 9px 22px rgba(63,109,246,.2); }
    .button.ghost { color:#8d929d; background:#f4f5f8; box-shadow:none; }
    .visual { min-height:440px; position:relative; display:grid; place-items:center; overflow:hidden; }
    .orb { position:absolute; border-radius:50%; filter:blur(.2px); }
    .orb.one { width:330px; height:330px; background:radial-gradient(circle at 30% 30%,#b9c9ff 0,#7ea0ff 43%,#5b67db 100%); transform:translate(-38px,-14px); box-shadow:inset -26px -29px 55px rgba(40,39,139,.28), 0 34px 76px rgba(73,93,206,.18); }
    .orb.two { width:190px; height:190px; background:radial-gradient(circle at 32% 28%,#ffe7fc,#d6b2ff 45%,#9c74e8); transform:translate(158px,111px); box-shadow:inset -17px -21px 36px rgba(91,42,160,.2); }
    .orb.three { width:112px; height:112px; background:radial-gradient(circle at 32% 28%,#defff9,#78d9d1 48%,#4d9cb8); transform:translate(-180px,148px); box-shadow:inset -12px -17px 27px rgba(30,108,125,.2); }
    .panel { width:min(360px,86%); min-height:186px; padding:21px; position:relative; z-index:2; border:1px solid rgba(255,255,255,.72); border-radius:25px; background:rgba(255,255,255,.72); box-shadow:0 24px 65px rgba(45,55,112,.16); backdrop-filter:blur(18px); }
    .panel-head { display:flex; align-items:center; gap:10px; margin-bottom:21px; }
    .avatar { width:32px; height:32px; border-radius:11px; background:linear-gradient(140deg,#587cf4,#9b71ed); }
    .lines { flex:1; } .line { height:8px; border-radius:99px; background:#e7e9f1; margin:6px 0; } .line.short { width:45%; }
    .bubble { width:76%; height:36px; border-radius:13px 13px 13px 4px; background:#eef1f8; margin:10px 0; }
    .bubble.blue { width:61%; margin-left:auto; border-radius:13px 13px 4px 13px; background:#5a73ee; }
    footer { border-top:1px solid var(--line); color:#969ba5; font-size:13px; } footer .shell { height:76px; display:flex; align-items:center; justify-content:space-between; }
    @media (max-width:800px) { .shell{padding:0 22px} header{height:70px} nav{display:none} main{grid-template-columns:1fr; padding:58px 0 40px; gap:12px} .visual{min-height:330px; order:-1} h1{font-size:48px}.lead{font-size:16px}.orb.one{width:250px;height:250px}.orb.two{transform:translate(120px,85px)}.orb.three{transform:translate(-135px,110px)} }
    @media (prefers-reduced-motion:no-preference) { .orb { animation:float 8s ease-in-out infinite alternate; } .orb.two{animation-delay:-3s}.orb.three{animation-delay:-6s} @keyframes float{to{margin-top:-13px;margin-left:9px}} }