/* WEB PANEL PROXY public CSS */
:root {
      --ink: #14243b; --muted: #62718a; --blue: #315ee8; --blue-dark: #2349c5;
      --line: #e5eaf2; --surface: #fff; --wash: #f4f7fc; --mint: #dff7ef;
      --shadow: 0 22px 60px rgba(28, 48, 87, .10); --radius: 22px;
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0; color: var(--ink); background: #fff;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      line-height: 1.55; -webkit-font-smoothing: antialiased;
    }
    a { color: inherit; text-decoration: none; }
    .wrap { width: min(1160px, calc(100% - 44px)); margin-inline: auto; }
    header { height: 82px; display: flex; align-items: center; border-bottom: 1px solid rgba(229,234,242,.8); }
    .nav { display:flex; align-items:center; justify-content:space-between; gap:24px; }
    .brand { display:flex; align-items:center; gap:11px; font-size:18px; font-weight:760; letter-spacing:-.5px; white-space:nowrap; }
    .logo { width:38px; height:38px; display:grid; place-items:center; border-radius:13px; color:#fff; background:linear-gradient(145deg,#4777ff,#254bcf); box-shadow:0 7px 16px #315ee82b; }
    .links { display:flex; align-items:center; gap:30px; color:#56657b; font-size:14px; font-weight:550; }
    .links a:hover, footer a:hover { color:var(--blue); }
    .btn { display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:46px; padding:0 19px; border-radius:12px; font-weight:680; font-size:14px; transition:transform .18s, background .18s; }
    .btn:hover { transform:translateY(-1px); }
    .btn-primary { color:#fff; background:var(--blue); box-shadow:0 8px 18px #315ee82c; }
    .btn-primary:hover { background:var(--blue-dark); }
    .btn-light { color:var(--ink); background:#fff; border:1px solid var(--line); }
    .hero { padding:82px 0 78px; background:radial-gradient(ellipse at 83% 35%,#edf2ff 0,rgba(237,242,255,0) 38%),linear-gradient(180deg,#fbfcff 0%,#fff 100%); overflow:hidden; }
    .hero-grid { display:grid; grid-template-columns:1.02fr .98fr; align-items:center; gap:56px; }
    .eyebrow { display:inline-flex; align-items:center; gap:8px; color:#3155c8; background:#edf2ff; padding:7px 12px; border-radius:999px; font-size:12px; font-weight:750; letter-spacing:.35px; }
    .dot { width:7px; height:7px; background:#36b98a; border-radius:50%; box-shadow:0 0 0 4px #36b98a20; }
    h1 { margin:22px 0 18px; font-size:clamp(42px,5vw,64px); line-height:1.06; letter-spacing:-2.8px; font-weight:780; }
    h1 span { color:var(--blue); }
    .lead { max-width:510px; color:var(--muted); font-size:18px; line-height:1.75; margin:0 0 28px; }
    .hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
    .trust { display:flex; align-items:center; gap:10px; margin-top:25px; color:#738198; font-size:12px; }
    .avatars { display:flex; padding-left:5px; }
    .avatars span { width:25px; height:25px; margin-left:-5px; border:2px solid white; border-radius:50%; display:grid; place-items:center; background:#e3eafe; color:#3757b4; font-size:10px; font-weight:800; }
    .visual { min-height:425px; position:relative; display:flex; align-items:center; justify-content:center; }
    .cloud-card { width:min(100%,470px); padding:20px; border:1px solid #e4eaf5; border-radius:25px; background:rgba(255,255,255,.88); box-shadow:var(--shadow); transform:rotate(1deg); position:relative; z-index:2; }
    .cloud-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:19px; }
    .cloud-top strong { font-size:14px; }
    .cloud-top small { color:#8390a4; font-size:11px; display:block; margin-top:3px; }
    .storage { background:#f1f5ff; color:#3857bd; padding:8px 10px; border-radius:10px; font-size:11px; font-weight:700; }
    .photo-grid { display:grid; grid-template-columns:1.15fr .85fr .85fr; grid-template-rows:104px 104px; gap:9px; }
    .photo { overflow:hidden; border-radius:13px; position:relative; background:#dce7f2; }
    .photo svg { width:100%; height:100%; display:block; }
    .photo.tall { grid-row:span 2; }
    .file-row { display:flex; align-items:center; gap:11px; border-top:1px solid #edf0f6; padding-top:15px; margin-top:17px; }
    .file-icon { width:37px; height:37px; border-radius:11px; background:#eaf7f1; color:#1c9b70; display:grid; place-items:center; flex-shrink:0; }
    .file-info { min-width:0; flex:1; }
    .file-info strong { display:block; font-size:12px; }
    .file-info small { color:#8490a3; font-size:10px; }
    .file-size { color:#7b8799; font-size:10px; }
    .float-note { position:absolute; z-index:3; background:#fff; border:1px solid #e8edf5; box-shadow:0 12px 35px #1b2c4c12; border-radius:15px; padding:12px 15px; display:flex; align-items:center; gap:10px; }
    .float-note.one { right:-12px; top:35px; }
    .float-note.two { left:-24px; bottom:27px; }
    .float-note .mini-icon { width:32px; height:32px; display:grid; place-items:center; background:#eaf7f1; border-radius:10px; color:#15976b; }
    .float-note strong { display:block; font-size:11px; }
    .float-note small { display:block; font-size:10px; color:#8490a3; margin-top:1px; }
    .section { padding:78px 0; }
    .section-soft { background:var(--wash); }
    .section-head { text-align:center; max-width:650px; margin:0 auto 38px; }
    .kicker { color:var(--blue); text-transform:uppercase; font-size:11px; font-weight:800; letter-spacing:1.6px; }
    h2 { font-size:clamp(29px,3.5vw,42px); line-height:1.15; letter-spacing:-1.5px; margin:11px 0 13px; }
    .section-head p { color:var(--muted); margin:0; font-size:16px; }
    .features { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
    .feature { padding:27px; border:1px solid var(--line); background:#fff; border-radius:19px; }
    .feature-icon { width:46px; height:46px; border-radius:14px; display:grid; place-items:center; background:#edf2ff; color:var(--blue); margin-bottom:20px; }
    .feature:nth-child(2) .feature-icon { background:#e4f8f0; color:#17966b; }
    .feature:nth-child(3) .feature-icon { background:#fff2df; color:#b8791c; }
    .feature h3 { font-size:17px; margin:0 0 8px; letter-spacing:-.35px; }
    .feature p { color:var(--muted); font-size:14px; margin:0; line-height:1.75; }
    .bottom-cta { padding:48px; border-radius:26px; background:linear-gradient(120deg,#172c50,#244c98); color:#fff; display:flex; align-items:center; justify-content:space-between; gap:28px; }
    .bottom-cta h2 { margin:0 0 9px; font-size:31px; letter-spacing:-1px; }
    .bottom-cta p { margin:0; color:#d1def7; max-width:560px; font-size:14px; }
    .bottom-cta .btn { flex-shrink:0; background:#fff; color:#1d3c7b; }
    footer { border-top:1px solid var(--line); padding:27px 0; color:#78859a; font-size:12px; }
    .foot { display:flex; justify-content:space-between; align-items:center; gap:20px; }
    .foot-links { display:flex; gap:21px; flex-wrap:wrap; }
    .notice { font-size:11px; color:#8a96a8; margin-top:5px; }
    @media (max-width:850px) {
      .links { gap:16px; } .hero { padding:60px 0; }
      .hero-grid { grid-template-columns:1fr; gap:20px; }
      .hero-copy { text-align:center; } .lead { margin-inline:auto; }
      .hero-actions,.trust { justify-content:center; }
      .visual { width:min(100%,520px); margin:0 auto; min-height:390px; }
      .features { grid-template-columns:1fr; } .feature { padding:23px; }
      .bottom-cta { padding:34px; flex-direction:column; align-items:flex-start; }
    }
    @media (max-width:560px) {
      .wrap { width:min(100% - 30px,1160px); }
      header { height:70px; } .links a:not(.btn) { display:none; }
      .brand { font-size:16px; } .logo { width:34px; height:34px; }
      h1 { letter-spacing:-1.8px; font-size:43px; }
      .lead { font-size:16px; }
      .visual { min-height:330px; }
      .cloud-card { padding:13px; border-radius:19px; }
      .photo-grid { grid-template-rows:78px 78px; gap:6px; }
      .float-note.one { right:-2px; top:4px; } .float-note.two { left:-4px; bottom:0; }
      .float-note { padding:9px 11px; }
      .section { padding:58px 0; }
      .bottom-cta { padding:27px 23px; } .bottom-cta h2 { font-size:27px; }
      .foot { flex-direction:column; align-items:flex-start; }
    }
    @media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition:none !important; } }