:root{
    --bg:#0b0c10;         /* тёмный фон */
    --surface:#121319;    /* карточки/панели */
    --muted:#1a1c25;      /* ховеры/бордеры */
    --text:#e6e8ef;       /* основной текст */
    --text-dim:#a6abbd;   /* вторичный текст */
    --brand:#7c5cff;      /* акцент */
    --brand-2:#00e3a2;    /* второй акцент */
    --stroke:rgba(255,255,255,.06);
    --radius:16px;
    --shadow:0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04);
    --accent:#6a5bff;
    --header-clr1:rgba(11,12,16,.9);
    --header-clr2:rgba(11,12,16,.65);
    --btn-shadow-1:rgba(255,255,255,.04);
    --btn-shadow-2:rgba(255,255,255,.02);
    --badge-border:rgba(124,92,255,.40);
    --badge-bkg:rgba(124,92,255,.16);
    --badge-text:#cfe9ff;

    --panel:#0f1526;
    --soft:#0f1117;
    --accent-2:#00e0b5;
    --accent-soft:#a6abbd;

    --btn-bg-actite: #1d2845;
    --btn-txt-active: #fff;
}
*{box-sizing:border-box}
html[data-theme="light"]{
    --bg:#f6f7fb; --panel:#ffffff; --soft:#f1f3f8;
    --text:#0b1020;
    --muted:#5b6072;
    --accent:#6a5bff;
    --accent-2:#06c3a1;
    --stroke:rgba(11,16,32,.12);
    --shadow:0 14px 30px rgba(11,16,32,.08), inset 0 1px 0 rgba(0,0,0,.04);
    --header-clr1:rgba(255,255,255,.9);
    --header-clr2:rgba(255,255,255,.65);
    --badge-border:rgba(106,91,255,.45);
    --badge-bkg:rgba(106,91,255,.15);
    --badge-text:#37267a;
    --btn-shadow-1:rgba(11, 16, 32, .02);
    --btn-shadow-2:rgba(11, 16, 32, .01);

    --btn-bg-actite: #90a8e4;
    --btn-txt-active: #fff;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
    margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; color:var(--text);
    background:
        /* Основные градиенты */
            radial-gradient(circle 600px at 20% -10%,
            color-mix(in oklab, var(--accent) 25%, transparent) 0%,
            color-mix(in oklab, var(--accent) 10%, transparent) 40%,
            transparent 70%),
            radial-gradient(circle 800px at 110% 50%,
            color-mix(in oklab, var(--accent-2) 22%, transparent) 0%,
            color-mix(in oklab, var(--accent-2) 8%, transparent) 45%,
            transparent 75%),

                /* Зеркальные градиенты с противоположных сторон */
            radial-gradient(circle 600px at 20% 110%,
            color-mix(in oklab, var(--accent) 25%, transparent) 0%,
            color-mix(in oklab, var(--accent) 10%, transparent) 40%,
            transparent 70%),


            linear-gradient(180deg,
            var(--bg) ,
            var(--bg) ,
            var(--bg));
    line-height: 1.6;
    letter-spacing: .01em;

}
html[data-theme="light"] body{
    background:
        /* Основные градиенты */
            radial-gradient(circle 600px at 20% -10%,
            color-mix(in oklab, var(--accent) 25%, transparent) 0%,
            color-mix(in oklab, var(--accent) 10%, transparent) 40%,
            transparent 70%),
            radial-gradient(circle 800px at 110% 50%,
            color-mix(in oklab, var(--accent-2) 22%, transparent) 0%,
            color-mix(in oklab, var(--accent-2) 8%, transparent) 45%,
            transparent 75%),

                /* Зеркальные градиенты с противоположных сторон */
            radial-gradient(circle 600px at 20% 110%,
            color-mix(in oklab, var(--accent) 25%, transparent) 0%,
            color-mix(in oklab, var(--accent) 10%, transparent) 40%,
            transparent 70%),


            linear-gradient(180deg,
            var(--bg) ,
            var(--bg) ,
            var(--bg))
}

a{color:inherit; text-decoration:none}
.wrap{
    /*min-height:calc(100dvh - 60px - 72px); */
    display:grid;
    place-items:center;
    padding:24px
}
.card{
    width:min(440px, 100%); background:var(--panel); border:1px solid var(--stroke); border-radius:var(--radius);
    box-shadow:var(--shadow); padding:22px;
}
.logo{display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.02em; margin-bottom:4px}
.logo-badge{width:32px; height:32px; border-radius:10px; background:linear-gradient(135deg,var(--accent),#5a3fff 40%, #2b1a99); box-shadow:0 6px 18px rgba(124,92,255,.45)}
.muted{color:var(--muted)}
h1{margin:6px 0 2px; font-size:22px}
.sub{margin:0 0 16px; color:var(--muted); font-size:14px}

.field{display:grid; gap:8px; margin:12px 0}
.label{font-weight:600}
.input{
    width:100%; padding:12px 12px; border-radius:12px; background:var(--soft); color:var(--text);
    border:1px solid var(--stroke);
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px var(--soft) inset !important;
    -webkit-text-fill-color:  var(--text) !important;
    transition: background-color 5000s ease-in-out 0s;
    background-color: var(--soft) !important;
}
.input:focus{outline:2px solid color-mix(in oklab, var(--accent) 50%, transparent); outline-offset:2px}
.row{display:flex; align-items:center; justify-content:space-between; gap:10px}
.checkbox{display:flex; align-items:center; gap:8px; color:var(--muted); font-size:14px}
.btn:disabled{opacity:.6; cursor:not-allowed}
.help{display:flex; justify-content:space-between; align-items:center; margin-top:10px}
.link{color:color-mix(in oklab, var(--accent) 70%, #fff); font-weight:600}
.err{visibility:hidden; margin:8px 0; padding:10px 12px; border-radius:10px; border:1px solid rgba(255,80,80,.35);
    background:rgba(255,80,80,.12); color:#ffdcdc; font-size:14px}
html[data-theme="light"] .err{ color:#5a1a1a; background:rgba(255,80,80,.12) }
.err.error {
    visibility: visible;
}
/* toggle password */
.pass-wrap{position:relative}
.toggle-pass{
    position:absolute; right:8px; top:calc(50% + 17px); transform:translateY(-50%); border:1px solid var(--stroke);
    background:color-mix(in oklab, var(--panel) 40%, transparent); color:var(--text);
    border-radius:10px; padding:px 8px; cursor:pointer; font-size:12px;
}

/* footer reserve space: 72px (примерная высота футера) */
.mini-foot{margin-top:16px; text-align:center; color:var(--muted); font-size:12px}
.brand-link{display:inline-flex; align-items:center; gap:8px; margin-top:10px}

/* accessibility */
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

html,body{height:100%}
body{
    margin:0;
    font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,Helvetica,sans-serif;
    background:/* Основные градиенты */
            radial-gradient(circle 600px at 20% -10%,
            color-mix(in oklab, var(--accent) 25%, transparent) 0%,
            color-mix(in oklab, var(--accent) 10%, transparent) 40%,
            transparent 70%),
            radial-gradient(circle 800px at 110% 50%,
            color-mix(in oklab, var(--accent-2) 22%, transparent) 0%,
            color-mix(in oklab, var(--accent-2) 8%, transparent) 45%,
            transparent 75%),

                /* Зеркальные градиенты с противоположных сторон */
            radial-gradient(circle 600px at 20% 110%,
            color-mix(in oklab, var(--accent) 25%, transparent) 0%,
            color-mix(in oklab, var(--accent) 10%, transparent) 40%,
            transparent 70%),


            linear-gradient(180deg,
            var(--bg) ,
            var(--bg) ,
            var(--bg));
    color:var(--text);
    -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;max-height:100%;display:block;height: auto;}

/* Фокусы для доступности */
a:focus-visible, button:focus-visible, input:focus-visible{
    outline:2px solid var(--brand);
    outline-offset:2px;
    border-radius:10px;
}

/* контейнер */
.container, .container.blog-inner{width:min(1160px, 100% - 32px);margin-inline:auto}
.container.profile {
    width: min(1200px,100% - 32px);
}
/* Header */
.header{position:sticky;top:0;z-index:20;background:linear-gradient(180deg, var(--header-clr1), var(--header-clr2));backdrop-filter:saturate(150%) blur(10px);border-bottom:1px solid var(--stroke)}
.header-inner{display:flex;align-items:center;gap:20px;min-height:64px}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.2px}
.logo-badge{text-align:center;width:28px;height:28px;border-radius:10px;background:linear-gradient(135deg,var(--brand),#a592ff 60%, #cbbdff);box-shadow:0 6px 18px rgba(124,92,255,.45);}
.nav{margin-left:auto;display:flex;gap:14px;align-items:center}
.nav a{padding:10px 12px;border-radius:10px;color:var(--text-dim);transition:.2s;border:1px solid transparent}
.nav a:hover{color:var(--text);background:var(--muted);border-color:var(--stroke)}
.btn-price{margin-left:6px;padding:10px 14px;border-radius:12px;background:linear-gradient(135deg,var(--brand),#6b8bff);color:#fff;font-weight:600;box-shadow:0 6px 18px rgba(124,92,255,.35)}

/* Footer */
.footer{border-top:1px solid var(--stroke);padding:24px 0;color:var(--text-dim)}
.footer .grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
.foot-note{margin-top:10px;font-size:13px}

@media (max-width: 980px){
    .hero-wrap{grid-template-columns:1fr}
    .layout{grid-template-columns:1fr}
    .posts{grid-template-columns:1fr}
    .nav{display:none}
}

.footer .list{display:flex;flex-direction:column;gap:8px}
.footer .list a{display:flex;justify-content:space-between;align-items:center;padding:10px 10px;border-radius:10px;background:#0f1117;border:1px solid var(--stroke);color:var(--text-dim)}
.footer .list a:hover{color:#fff;border-color:var(--muted)}
.footer .btn{
    padding:10px 12px; border-radius:12px; background:linear-gradient(135deg,var(--brand),#6b8bff);
    border:0; color:#fff; font-weight:600; cursor:pointer;
}
.footer{
    background: linear-gradient(180deg, var(--header-clr1), var(--header-clr2));
}
.toast {
    position: fixed;
    right: 16px;
    bottom: 16px;
    background: var(--surface-2);
    border: 1px solid var(--stroke);
    border-radius: 12px;
    padding: 12px 14px;
    display: flex;
    gap: 10px;
    align-items: center;
    opacity: 0;
    transform: translateY(8px);
    transition: .2s
}

.toast.show {
    opacity: 1;
    transform: translateY(0)
}

form.subscribe{
    display: flex;
}

form.subscribe input {
    margin-right: 10px;
}

form#loginForm .row {
    margin: 40px 0 15px;
}
.theme-toggle {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 1px solid var(--stroke);
    background:
            color-mix(in oklab, var(--panel) 80%, transparent);
    color: var(--text);
    cursor: pointer;
    transition: background .2s, border-color .2s, transform .1s;
    padding: 4px 4px;
}

/**
Last order on index
 */

.orders-card{padding:18px; display:grid; gap:12px;}
.orders-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}
.orders-title{
    display:flex;
    align-items:center;
    gap:8px;
    font-weight:600;
    font-size:14px;
    color:var(--muted);
}
.orders-title span.icon{
    width:26px; height:26px; border-radius:50%;
    display:grid; place-items:center;
    background:rgba(124,92,255,.2);
    color:#fff;
    font-size:13px;
}
html[data-theme="light"] .orders-title span.icon{
    color:#fff;
}
.order-list{
    display:grid;
    gap:8px;
    margin-top:4px;
}
.order-row{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:8px;
    padding:10px 10px;
    border-radius:12px;
    background:rgba(255,255,255,.02);
    border:1px solid rgba(255,255,255,.04);
    cursor:pointer;
    transition:background .16s,border-color .16s,transform .1s;
}
.order-row:hover{
    background:rgba(124,92,255,.12);
    border-color:rgba(124,92,255,.45);
    transform:translateY(-1px);
}
html[data-theme="light"] .order-row{
    background:rgba(243,244,255,.9);
    border-color:rgba(106,91,255,.08);
}
html[data-theme="light"] .order-row:hover{
    background:rgba(233,233,255,1);
    border-color:rgba(106,91,255,.45);
}
.order-main{
    min-width:0;
}
.pill{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:4px 9px;
    border-radius:999px;
    background:rgba(255,255,255,.06);
    font-size:11px;
    color:#cdd5f0;
}
html[data-theme="light"] .pill{
    background:rgba(106,91,255,.08);
    color:#433364;
}
.pill span.dot{
    width:7px; height:7px; border-radius:50%;
    background:#10b981;
}
.order-title{
    margin:6px 0 2px;
    font-weight:600;
    font-size:14px;
}
.order-meta{
    font-size:12px;
    color:var(--muted);
}
.order-right{
    text-align:right;
    font-size:13px;
    white-space:nowrap;
}
.order-budget{
    font-weight:700;
}
.order-time{
    font-size:11px;
    color:var(--muted);
}

.orders-footer{
    margin-top:4px;
    font-size:11px;
    color:var(--muted);
    display:flex;
    justify-content:space-between;
    gap:8px;
    align-items:center;
    flex-wrap:wrap;
}
.orders-footer a{
    text-decoration:underline;
    text-underline-offset:2px;
    font-size:11px;
}

.logos{
    margin:30px auto 0;
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    align-items:center;
}
.logos .logo-item{
    padding:7px 11px;
    border-radius:10px;
    background:rgba(255,255,255,.04);
    border:1px solid var(--stroke);
    color:#cdd5f0;
    font-weight:600;
    font-size:12px;
}
html[data-theme="light"] .logos .logo-item{
    background:#ffffff;
    color:#4b5164;
}

.card.categories {
    width: auto;
    padding:18px;
}

/* Blog */
.blog-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
}
.blog-card{
    padding:0;
    overflow:hidden;
    display:flex;
    flex-direction:column;
}
.blog-thumb{
    height:140px;
    background-size:cover;
    background-position:center;
}
.blog-thumb--guide{
    background-image:linear-gradient(135deg,#ffb457,#ff6b88);
}
.blog-thumb--case{
    background-image:linear-gradient(135deg,#5ee7df,#b490ca);
}
.blog-thumb--update{
    background-image:linear-gradient(135deg,#7f7bff,#57b3ff);
}
html[data-theme="light"] .blog-thumb--guide{
    background-image:linear-gradient(135deg,#ffcc80,#ff8a80);
}
html[data-theme="light"] .blog-thumb--case{
    background-image:linear-gradient(135deg,#7ee8d3,#c1a4ff);
}
html[data-theme="light"] .blog-thumb--update{
    background-image:linear-gradient(135deg,#a5a3ff,#76c8ff);
}
.blog-body{
    padding:18px;
    display:flex;
    flex-direction:column;
    gap:8px;
    height: 100%;
}
.blog-meta{
    font-size:12px;
    color:var(--muted);
    display:flex;
    justify-content:space-between;
    gap:8px;
    flex-wrap:wrap;
}

/* CTA bottom */
.card.cta-block{
    width: auto;
}
.cta-block{
    padding:26px;
    display:grid;
    gap:10px;
    text-align:center;
    position:relative;
    overflow:hidden;
}
.cta-block::before{
    content:"";
    position:absolute;
    inset:-40%;
    background:
            radial-gradient(260px 260px at 10% 0%, rgba(124,92,255,.38), transparent 60%),
            radial-gradient(260px 260px at 90% 100%, rgba(0,224,181,.3), transparent 60%);
    opacity:.75;
    pointer-events:none;
}
html[data-theme="light"] .cta-block::before{
    opacity:.7;
}
.cta-block-inner{
    position:relative;
    z-index:1;
    display:grid;
    gap:10px;
}

/* Sections */
/*section{padding:64px 0}*/
section:nth-of-type(2){
    padding-top:32px;
}
.section-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:14px;
    flex-wrap:wrap;
    margin-bottom:18px;
}

.grid-3{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
}
.feature{padding:20px}
.feature h3{margin:10px 0 6px}
.muted{color:var(--muted)}

.chips{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}
.chip{
    padding:8px 12px;
    border-radius:999px;
    background:rgba(255,255,255,.05);
    border:1px solid var(--stroke);
    font-size:13px;
}
html[data-theme="light"] .chip{
    background:#ffffff;
}

.steps{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
}
.step{padding:18px}
.step .num{
    width:36px; height:36px;
    display:grid; place-items:center;
    border-radius:10px;
    background:rgba(124,92,255,.20);
    border:1px solid rgba(124,92,255,.40);
    font-weight:800;
    color:#fff;
}
html[data-theme="light"] .step .num{
    background:rgba(106,91,255,.18);
    color:#1b123b;
}

/* Pricing */
.pricing{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
}
.price-card{
    display: flex;
    padding: 24px;
    position: relative;
    overflow: hidden;
    flex-direction: column;
    justify-content: space-around;
}
.price-card ul.features{
    min-height: 130px;
}
.price-card--highlight{
    border-color:rgba(124,92,255,.55);
    box-shadow:0 18px 45px rgba(66,51,135,.55);
    background:
            radial-gradient(240px 220px at 80% 0%, rgba(124,92,255,.4), transparent 60%),
            linear-gradient(180deg, rgba(124,92,255,.16), rgba(12,18,40,1));
}
html[data-theme="light"] .price-card--highlight{
    background:
            radial-gradient(260px 220px at 80% 0%, rgba(124,92,255,.25), transparent 60%),
            linear-gradient(180deg,#ffffff 0%, #f2f1ff 100%);
}

.ribbon{
    position:absolute;
    top:14px;
    right:14px;
    padding:5px 10px;
    border-radius:999px;
    background:rgba(0,224,181,.16);
    border:1px solid rgba(0,224,181,.6);
    color:#baffed;
    font-weight:700;
    font-size:11px;
}
html[data-theme="light"] .ribbon{
    color:#085746;
    background:rgba(6,195,161,.16);
    border-color:rgba(6,195,161,.6);
}

.price{
    font-size:32px;
    font-weight:800;
    letter-spacing:-.02em;
}
.per{color:#b5bdd6; font-size:13px;}
html[data-theme="light"] .per{color:#6a7083;}
.price-old{
    font-size:13px;
    color:var(--muted);
    text-decoration:line-through;
    margin-right:6px;
}

.check{
    display:flex;
    gap:10px;
    align-items:flex-start;
    margin:8px 0;
    font-size:14px;
}
.check svg{flex:0 0 auto}

.btn-round{
    padding:11px 18px;
    border-radius:999px;
    font-weight:700;
    display:inline-flex;
    align-items:center;
    gap:8px;
    width: max-content;
    border: 1px solid var(--stroke);
    background: linear-gradient(180deg, var(--btn-shadow-1), var(--btn-shadow-2));

}
.hero .btn-round.accent {
    box-shadow:var(--ring);
}
.hero .btn-round.accent {
    border:none;
}

.btn-round.accent{
    background:linear-gradient(135deg,var(--accent),#5a3fff);
    color:#fff;
    border:none;
}
.price-card ul{
    list-style: none;
    padding-inline-start: 15px;
}
.price-card ul li:before{
    content: "✔";
    color: #2ecc71;
    font-size: 18px;
    margin-right: 10px;
}

.btn-blog{
    padding:9px 14px;
    border:1px solid var(--stroke);
    border-radius:999px;
    color:var(--text);
    background:linear-gradient(180deg, color-mix(in oklab, var(--text) 4%, transparent), transparent);
    font-weight:500;
}

.badge{
    display:inline-flex; align-items:center; gap:8px;
    color:var(--badge-text);
    background:var(--badge-bkg);
    border:1px solid var(--badge-border);
    padding:6px 10px;
    border-radius:999px;
    font-weight:600;
    font-size:13px;
}
.hero{padding:64px 0 24px}
.hero-grid{
    display:grid;
    grid-template-columns:1.2fr .9fr;
    gap:32px;
    align-items:flex-start;
}
.blog-wrap{
    height: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-between;
}

/* Footer */
footer{
    padding:36px 0;
    border-top:1px solid var(--stroke);
    color:var(--text);
    backdrop-filter:saturate(120%) blur(8px);
    background:linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.02));
}
html[data-theme="light"] footer{
    background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.98));
}


.lead {
    font-size: 18px;
    color: var(--muted);
    max-width: 640px
}
.header nav{display:flex; gap:20px; align-items:center}
.header nav a{padding:8px 10px; color:var(--text); border-radius:999px; transition:.2s}
.header nav a:hover{
    color:var(--text);
    background:color-mix(in oklab, var(--accent-soft) 40%, transparent);
}

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

.field{display:grid; gap:8px; margin:12px 0}
.label{font-weight:600}
/*.input{*/
/*  width:100%; padding:12px 12px; border-radius:12px; background:var(--soft); color:var(--text);*/
/*  border:1px solid var(--stroke);*/
/*}*/
.input:focus{outline:2px solid color-mix(in oklab, var(--accent) 50%, transparent); outline-offset:2px}
.row{display:flex; align-items:center; justify-content:space-between; gap:10px}
.checkbox{display:flex; align-items:center; gap:8px; color:var(--muted); font-size:14px}
.btn{
    width:100%; padding:12px 16px; border-radius:12px; border:0; cursor:pointer; color:#fff; font-weight:700;
    background:linear-gradient(135deg,var(--accent),#5a3fff); box-shadow:0 8px 28px rgba(124,92,255,.35);
}
.btn:disabled{opacity:.6; cursor:not-allowed}
.help{display:flex; justify-content:space-between; align-items:center; margin-top:10px}
.link{color:color-mix(in oklab, var(--accent) 70%, #fff); font-weight:600}

/* toggle password */
.pass-wrap{position:relative}

/* footer reserve space: 72px (примерная высота футера) */
.mini-foot{margin-top:16px; text-align:center; color:var(--muted); font-size:12px}
.brand-link{display:inline-flex; align-items:center; gap:8px; margin-top:10px}

/* accessibility */
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

p.sub {
    color: var(--text);
    margin: 20px 0 50px;
}
form .checkbox{
    color: var(--text);
}

@media (max-width: 1024px){
    .hero-grid{grid-template-columns:1fr}
    .pricing{grid-template-columns:1fr 1fr}
    .steps{grid-template-columns:1fr 1fr}
    .grid-3{grid-template-columns:1fr 1fr}
    .blog-grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 768px){
    .menu{gap:12px; flex-wrap:wrap; justify-content:flex-end}
    .hero{padding-top:40px}
    .pricing{grid-template-columns:1fr}
    .steps{grid-template-columns:1fr}
    .grid-3{grid-template-columns:1fr}
    .blog-grid{grid-template-columns:1fr}
    section{padding:44px 0}
    section:nth-of-type(2){padding-top:20px}
}

.container .content{
    background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01));
    border-radius:var(--radius);
    border:1px solid var(--stroke);
    padding:24px 18px;
    box-shadow:0 10px 40px rgba(0,0,0,.4);
    margin: 48px 0;
}

footer .ft-row {
    display:flex;
    justify-content:space-between;
    gap:16px;
    flex-wrap:wrap;
}
footer .ft-row.right-float {
    justify-content: flex-end;
}