*{margin:0;padding:0;box-sizing:border-box;}
        body{font-family:'Inter',system-ui,-apple-system,sans-serif;color:#1a1a2e;background:#f8f9fc;line-height:1.75;-webkit-font-smoothing:antialiased;}

        .legal-hero{
            position:relative;overflow:hidden;
            padding:80px 24px 60px;text-align:center;
            background:linear-gradient(135deg,#0f0c29 0%,#302b63 50%,#24243e 100%);
            color:#fff;
        }
        .legal-hero::before{
            content:'';position:absolute;inset:0;
            background:radial-gradient(circle at 30% 20%,rgba(99,102,241,0.3) 0%,transparent 50%),
                        radial-gradient(circle at 70% 80%,rgba(139,92,246,0.2) 0%,transparent 50%);
        }
        .legal-hero *{position:relative;z-index:1;}
        .hero-icon{
            width:64px;height:64px;margin:0 auto 20px;
            background:rgba(255,255,255,0.1);border-radius:16px;
            display:flex;align-items:center;justify-content:center;
            backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.15);
        }
        .hero-icon svg{width:28px;height:28px;stroke:#a5b4fc;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
        .legal-hero h1{font-family:'Playfair Display',serif;font-size:clamp(2rem,5vw,3rem);font-weight:700;margin-bottom:10px;letter-spacing:-0.02em;}
        .legal-hero .subtitle{font-size:1.05rem;opacity:0.7;font-weight:400;}

        nav.topbar{
            position:fixed;top:0;left:0;right:0;z-index:100;
            padding:14px 24px;display:flex;align-items:center;justify-content:space-between;
            background:rgba(15,12,41,0.85);backdrop-filter:blur(12px);
            border-bottom:1px solid rgba(255,255,255,0.08);transition:background 0.3s;
        }
        nav.topbar a{color:#fff;text-decoration:none;font-size:14px;font-weight:500;opacity:0.8;transition:opacity 0.2s;}
        nav.topbar a:hover{opacity:1;}
        nav.topbar .brand{font-weight:700;font-size:16px;opacity:1;letter-spacing:-0.01em;}
        nav.topbar .nav-links{display:flex;gap:20px;}

        .content-wrap{max-width:760px;margin:-30px auto 0;padding:0 20px 60px;position:relative;z-index:2;}
        .content-card{
            background:#fff;border-radius:16px;
            box-shadow:0 1px 3px rgba(0,0,0,0.04),0 8px 40px rgba(0,0,0,0.06);
            padding:48px clamp(24px,5vw,56px);
        }
        .content-card h1{font-family:'Playfair Display',serif;font-size:1.6rem;font-weight:700;color:#1a1a2e;margin:36px 0 12px;letter-spacing:-0.01em;}
        .content-card h2{font-size:1.25rem;font-weight:600;color:#1a1a2e;margin:32px 0 10px;padding-top:24px;border-top:1px solid #f0f0f5;}
        .content-card h2:first-child{border-top:none;padding-top:0;margin-top:0;}
        .content-card h3{font-size:1.05rem;font-weight:600;color:#333;margin:24px 0 8px;}
        .content-card p{color:#4a4a68;margin-bottom:14px;font-size:0.97rem;}
        .content-card ul,.content-card ol{color:#4a4a68;padding-left:22px;margin-bottom:14px;}
        .content-card li{margin-bottom:8px;font-size:0.97rem;}
        .content-card strong{color:#1a1a2e;font-weight:600;}
        .content-card a{color:#6366f1;text-decoration:none;border-bottom:1px solid rgba(99,102,241,0.3);transition:border-color 0.2s;}
        .content-card a:hover{border-color:#6366f1;}

        .meta-bar{
            display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;
            margin-top:40px;padding-top:24px;border-top:1px solid #eeeef5;
        }
        .meta-bar .date{font-size:0.85rem;color:#9898b0;}
        .back-btn{
            display:inline-flex;align-items:center;gap:8px;
            padding:10px 22px;background:#6366f1;color:#fff;
            border-radius:10px;font-size:14px;font-weight:600;text-decoration:none;
            transition:background 0.2s,transform 0.15s;
        }
        .back-btn:hover{background:#4f46e5;transform:translateY(-1px);}
        .back-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;}

        footer.legal-footer{
            text-align:center;padding:32px 24px;
            background:#1a1a2e;color:rgba(255,255,255,0.5);font-size:13px;
        }
        footer.legal-footer a{color:rgba(255,255,255,0.65);text-decoration:none;margin:0 10px;}
        footer.legal-footer a:hover{color:#fff;}

        @media(max-width:640px){
            .legal-hero{padding:70px 20px 50px;}
            .content-card{padding:28px 20px;}
            nav.topbar .nav-links{gap:12px;}
        }