@import url('https://cdn.8s.by/fonts/Rubik:300.css');
@import url('https://cdn.8s.by/fonts/Rubik:400.css');
@import url('https://cdn.8s.by/fonts/Rubik:500.css');
@import url('https://cdn.8s.by/fonts/Rubik:700.css');

:root{
    --bg:#fff8f2;
    --surface:rgba(255,255,255,0.82);
    --text:#1b140f;
    --muted:#6e5f55;
    --line:rgba(255,145,44,0.22);

    --accent:#ff6a00;
    --accent-hover:#e45f00;

    --chip-bg:#fff0e2;
    --chip-text:#9d4600;
    --radius:16px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}

body{
    font-family:'Rubik',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
    color:var(--text);
    line-height:1.6;
    min-height:100vh;
    background:
            radial-gradient(900px 500px at 8% 2%, rgba(255,106,0,0.34), transparent 60%),
            radial-gradient(800px 460px at 92% 8%, rgba(255,149,64,0.28), transparent 64%),
            radial-gradient(900px 520px at 50% 110%, rgba(255,120,20,0.25), transparent 66%),
            linear-gradient(180deg, #fffaf5 0%, #fff4ea 55%, #ffefdf 100%);
    background-attachment: fixed;
    position: relative;
    overflow-x: hidden;
}

/* Смелое неоновое свечение */
body::before,
body::after{
    content:"";
    position:fixed;
    pointer-events:none;
    z-index:0;
    border-radius:50%;
    filter: blur(55px) saturate(135%);
}

body::before{
    width:520px;
    height:520px;
    left:-140px;
    top:-120px;
    background:radial-gradient(circle, rgba(255,102,0,0.55) 0%, rgba(255,102,0,0.18) 45%, transparent 72%);
    animation: glowFloat1 9s ease-in-out infinite alternate;
}

body::after{
    width:480px;
    height:480px;
    right:-120px;
    top:40px;
    background:radial-gradient(circle, rgba(255,153,51,0.5) 0%, rgba(255,153,51,0.14) 48%, transparent 74%);
    animation: glowFloat2 11s ease-in-out infinite alternate;
}

@keyframes glowFloat1{
    from{ transform: translate(0,0) scale(1); }
    to{ transform: translate(25px,20px) scale(1.08); }
}
@keyframes glowFloat2{
    from{ transform: translate(0,0) scale(1); }
    to{ transform: translate(-22px,16px) scale(1.06); }
}

.wrap{
    position:relative;
    z-index:1;
    max-width:860px;
    margin:0 auto;
    padding:30px 16px 42px;
}

.card{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:22px;
    margin-bottom:12px;
    backdrop-filter: blur(10px);
    box-shadow:
            0 14px 36px rgba(255,106,0,0.16),
            0 2px 10px rgba(29,17,10,0.06),
            0 0 0 1px rgba(255,255,255,0.55) inset;
}

.hero{
    border-left:4px solid var(--accent);
    padding-left:18px;
}

.top{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:10px;
}

.badge{
    width:46px;height:46px;border-radius:12px;
    display:inline-flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg, #ff8a1f, #ff5f00);
    color:#fff;
    font-weight:700;font-size:14px;
    border:1px solid rgba(255,255,255,.55);
    box-shadow:
            0 0 0 4px rgba(255,106,0,.20),
            0 10px 24px rgba(255,106,0,.38),
            0 0 20px rgba(255,126,33,.55);
    flex-shrink:0;
}

h1{
    margin:0;
    font-size:clamp(28px,4.2vw,36px);
    line-height:1.1;
    font-weight:700;
    letter-spacing:-0.01em;
}

.sub{
    margin:2px 0 0;
    color:var(--muted);
    font-size:14px;
}

.lead{
    margin:0;
    font-size:17px;
    color:#2a1e17;
}

.chips{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:14px;
}

.chip{
    display:inline-block;
    padding:6px 10px;
    border-radius:999px;
    font-size:13px;
    color:var(--chip-text);
    background:var(--chip-bg);
    border:1px solid #ffd0a7;
    box-shadow: 0 0 10px rgba(255,126,33,.14);
}

h2{
    margin:0 0 10px;
    font-size:21px;
    line-height:1.2;
    font-weight:600;
}

.list{
    margin:0;
    padding-left:18px;
}
.list li{margin-bottom:8px}

.actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top:12px;
}

.btn{
    display:inline-block;
    text-decoration:none;
    border-radius:11px;
    padding:10px 14px;
    font-size:15px;
    font-weight:500;
    border:1px solid transparent;
    transition:.18s ease;
}

.btn-primary{
    background:linear-gradient(135deg, #ff7a00, #ff5a00);
    color:#fff;
    box-shadow:
            0 10px 24px rgba(255,106,0,.35),
            0 0 18px rgba(255,126,33,.35);
}
.btn-primary:hover{
    background:linear-gradient(135deg, #ff6f00, #ef5200);
    transform: translateY(-1px);
}

.btn-ghost{
    background:rgba(255,255,255,0.85);
    color:#b55300;
    border-color:#ffc48d;
}
.btn-ghost:hover{
    background:#fff5ec;
    border-color:#ffaf63;
}

.note{
    color:var(--muted);
    font-size:14px;
    margin-top:6px;
}

.muted{color:var(--muted)}

.footer{
    text-align:center;
    color:#9b806d;
    font-size:13px;
    padding-top:6px;
}

@media (max-width:640px){
    .wrap{padding-top:16px}
    .card{padding:16px}
    .hero{padding-left:12px}
    .lead{font-size:16px}
    body::before{width:360px;height:360px}
    body::after{width:320px;height:320px}
}