.page-products{
    --apps-gold-soft:#F2E6C9;
    --apps-card-bkg:linear-gradient(160deg,#132B52 0%,#102345 100%);
    --apps-border:rgba(212,168,67,.35);
    --apps-line:rgba(140,110,47,.5);
    --apps-icon-bg:rgba(212,168,67,.12);
    --apps-radius-lg:20px;
    --apps-radius-md:14px;
    --apps-radius-sm:10px;
    font-family:var(--font-body);
    color:var(--color-text);
    background:var(--color-primary);
    line-height:1.75;
    overflow-x:hidden;
}
.page-products .breadcrumb{
    max-width:calc(var(--container-max) + 48px);
    margin:0 auto;
    padding:22px 24px 0;
    font-family:var(--font-mono);
    font-size:13px;
    letter-spacing:.04em;
    color:var(--color-muted);
}
.page-products .breadcrumb ol{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    list-style:none;
    padding:0;
    margin:0;
}
.page-products .breadcrumb a{
    color:var(--color-gold);
    text-decoration:none;
    transition:color .3s var(--ease);
}
.page-products .breadcrumb a:hover{
    color:var(--color-gold-light);
    text-decoration:underline;
}
.page-products .breadcrumb li[aria-current="page"]::before{
    content:"/";
    margin-right:8px;
    color:var(--color-muted);
}
.page-products .apps-hero{
    position:relative;
    display:grid;
    grid-template-columns:1fr;
    gap:36px;
    max-width:calc(var(--container-max) + 48px);
    margin:0 auto;
    padding:52px 24px 72px;
}
.page-products .apps-hero::before{
    content:"";
    position:absolute;
    top:0;
    right:0;
    width:46%;
    height:100%;
    background:linear-gradient(135deg,rgba(212,168,67,.14),rgba(212,168,67,.02));
    clip-path:polygon(22% 0,100% 0,100% 100%,0 100%);
    pointer-events:none;
}
.page-products .apps-hero__content{
    position:relative;
    z-index:1;
}
.page-products .apps-hero__tag{
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-family:var(--font-mono);
    font-size:13px;
    letter-spacing:.08em;
    color:var(--color-gold);
    text-transform:none;
    margin:0 0 18px;
    padding:6px 14px;
    border:1px solid var(--apps-border);
    border-radius:999px;
    background:rgba(212,168,67,.08);
}
.page-products .apps-hero__dot{
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--color-orange);
    box-shadow:0 0 0 3px rgba(255,107,44,.22);
}
.page-products .apps-hero__title{
    font-family:var(--font-head);
    font-size:32px;
    font-weight:700;
    line-height:1.25;
    color:var(--color-text);
    margin:0 0 18px;
    letter-spacing:.01em;
}
.page-products .apps-hero__desc{
    font-size:16px;
    color:var(--color-muted);
    max-width:560px;
    margin:0 0 28px;
}
.page-products .apps-hero__actions{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    margin-bottom:22px;
}
.page-products .apps-hero__actions .btn{
    text-decoration:none;
    font-family:var(--font-head);
    font-size:14px;
    font-weight:600;
    padding:12px 24px;
    border-radius:var(--apps-radius-sm);
    transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.page-products .apps-hero__actions .btn:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 28px rgba(0,0,0,.25);
}
.page-products .apps-hero__note{
    font-size:13px;
    color:var(--color-muted);
    margin:0;
    font-family:var(--font-mono);
    letter-spacing:.02em;
    border-left:2px solid var(--color-gold);
    padding-left:12px;
}
.page-products .apps-hero__media{
    position:relative;
    margin:0;
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:1;
}
.page-products .apps-hero__media::after{
    content:"";
    position:absolute;
    top:-14px;
    right:-6px;
    width:calc(100% - 34px);
    height:calc(100% - 34px);
    border:1px solid var(--color-gold);
    border-radius:32px;
    opacity:.42;
    pointer-events:none;
}
.page-products .apps-hero__img{
    position:relative;
    display:block;
    width:100%;
    max-width:320px;
    height:auto;
    border-radius:28px;
    border:1px solid var(--apps-border);
    box-shadow:0 24px 60px rgba(0,0,0,.38);
    background:var(--color-primary-card);
}
.page-products .apps-section{
    max-width:calc(var(--container-max) + 48px);
    margin:0 auto;
    padding:60px 24px;
}
.page-products .apps-section--compat{
    background:linear-gradient(180deg,rgba(19,43,82,.35),rgba(7,21,41,.55));
}
.page-products .apps-section__header{
    align-items:flex-start;
    gap:18px;
    margin-bottom:24px;
}
.page-products .apps-section__heading .section-title{
    margin-bottom:6px;
}
.page-products .apps-section__lead{
    max-width:680px;
    font-size:15px;
    color:var(--color-muted);
    margin:0 0 36px;
    border-left:3px solid var(--color-gold);
    padding-left:18px;
}
.page-products .apps-cards{
    display:grid;
    grid-template-columns:1fr;
    gap:20px;
}
.page-products .apps-card{
    position:relative;
    background:var(--apps-card-bkg);
    border:1px solid var(--apps-border);
    border-radius:var(--apps-radius-lg);
    padding:28px 24px 24px;
    transition:border-color .3s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease);
}
.page-products .apps-card::before{
    content:"";
    position:absolute;
    top:0;
    left:24px;
    width:46px;
    height:3px;
    background:var(--color-gold);
    border-radius:0 0 4px 4px;
}
.page-products .apps-card:hover{
    border-color:rgba(212,168,67,.68);
    box-shadow:0 0 0 1px rgba(212,168,67,.22),0 18px 40px rgba(0,0,0,.32);
    transform:translateY(-4px);
}
.page-products .apps-card__icon{
    width:64px;
    height:64px;
    border-radius:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--color-gold);
    background:var(--apps-icon-bg);
    border:1px solid var(--apps-border);
    margin-bottom:18px;
}
.page-products .apps-card__icon svg{
    width:34px;
    height:34px;
}
.page-products .apps-card__title{
    font-family:var(--font-head);
    font-size:18px;
    font-weight:600;
    color:var(--color-text);
    margin:0 0 10px;
}
.page-products .apps-card__desc{
    font-size:14px;
    color:var(--color-muted);
    margin:0 0 18px;
    line-height:1.7;
}
.page-products .apps-card__status{
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:4px 10px;
    border-radius:999px;
    background:var(--apps-icon-bg);
    border:1px solid var(--apps-border);
    color:var(--color-gold-light);
    font-family:var(--font-mono);
    font-size:12px;
    letter-spacing:.03em;
}
.page-products .apps-card__status .status-badge__dot{
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--color-gold);
}
.page-products .apps-compat{
    display:grid;
    grid-template-columns:1fr;
    gap:40px;
    align-items:center;
}
.page-products .apps-compat__intro{
    font-size:15px;
    color:var(--color-muted);
    margin:0 0 24px;
    max-width:600px;
}
.page-products .apps-compat__list{
    list-style:none;
    margin:0;
    padding:0;
}
.page-products .apps-compat__list li{
    display:flex;
    align-items:flex-start;
    gap:14px;
    padding:16px 0;
    border-bottom:1px solid var(--apps-line);
}
.page-products .apps-compat__list li:last-child{
    border-bottom:none;
}
.page-products .apps-compat__list p{
    margin:0;
    font-size:14px;
    color:var(--color-muted);
    line-height:1.7;
}
.page-products .apps-compat__list strong{
    color:var(--color-text);
    font-weight:600;
}
.page-products .apps-compat__badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    min-width:64px;
    font-family:var(--font-mono);
    font-size:12px;
    letter-spacing:.05em;
    padding:5px 12px;
    border:1px solid var(--apps-border);
    border-radius:6px;
    color:var(--color-gold);
    background:var(--apps-icon-bg);
}
.page-products .apps-compat__media,
.page-products .apps-changelog__media,
.page-products .apps-quickstart__media,
.page-products .apps-overview__media{
    margin:0;
}
.page-products .apps-compat__media img,
.page-products .apps-changelog__media img,
.page-products .apps-quickstart__media img,
.page-products .apps-overview__media img{
    display:block;
    width:100%;
    height:auto;
    max-width:100%;
    border-radius:var(--apps-radius-lg);
    border:1px solid var(--apps-line);
    background:var(--color-primary-card);
    object-fit:cover;
}
.page-products .apps-changelog{
    display:grid;
    grid-template-columns:1fr;
    gap:40px;
    align-items:center;
}
.page-products .apps-timeline{
    position:relative;
    padding-left:28px;
}
.page-products .apps-timeline::before{
    content:"";
    position:absolute;
    left:7px;
    top:10px;
    bottom:10px;
    width:1px;
    background:var(--color-line);
}
.page-products .apps-timeline__item{
    position:relative;
    margin-bottom:16px;
}
.page-products .apps-timeline__item::before{
    content:"";
    position:absolute;
    left:-28px;
    top:22px;
    width:13px;
    height:13px;
    border-radius:50%;
    background:var(--color-primary);
    border:2px solid var(--color-gold);
    box-shadow:0 0 0 4px rgba(212,168,67,.12);
    z-index:1;
}
.page-products .apps-timeline__item[open]::before{
    background:var(--color-gold);
}
.page-products .apps-timeline__head{
    display:flex;
    align-items:center;
    gap:12px;
    cursor:pointer;
    padding:16px;
    background:rgba(19,43,82,.6);
    border:1px solid var(--apps-line);
    border-radius:var(--apps-radius-md);
    transition:background .3s var(--ease),border-color .3s var(--ease);
    list-style:none;
    font-family:var(--font-head);
}
.page-products .apps-timeline__head::-webkit-details-marker{
    display:none;
}
.page-products .apps-timeline__head::marker{
    content:"";
}
.page-products .apps-timeline__head:hover{
    border-color:rgba(212,168,67,.55);
    background:rgba(19,43,82,.85);
}
.page-products .apps-timeline__item[open] .apps-timeline__head{
    border-color:rgba(212,168,67,.68);
    border-bottom-color:var(--apps-line);
    border-radius:var(--apps-radius-md) var(--apps-radius-md) 0 0;
}
.page-products .apps-timeline__version{
    font-family:var(--font-mono);
    font-size:13px;
    font-weight:700;
    color:var(--color-gold);
    white-space:nowrap;
    padding:3px 8px;
    border:1px solid var(--apps-border);
    border-radius:4px;
    background:var(--apps-icon-bg);
    flex-shrink:0;
}
.page-products .apps-timeline__title{
    font-family:var(--font-head);
    font-size:15px;
    font-weight:600;
    color:var(--color-text);
    flex:1;
    line-height:1.4;
}
.page-products .apps-timeline__expand{
    margin-left:auto;
    font-family:var(--font-mono);
    font-size:18px;
    line-height:1;
    color:var(--color-gold);
    width:28px;
    height:28px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid var(--apps-border);
    border-radius:50%;
    flex-shrink:0;
    transition:transform .3s var(--ease),background .3s var(--ease),color .3s var(--ease);
}
.page-products .apps-timeline__item[open] .apps-timeline__expand{
    transform:rotate(45deg);
    background:var(--color-gold);
    color:var(--color-primary);
    border-color:var(--color-gold);
}
.page-products .apps-timeline__body{
    padding:16px;
    color:var(--color-muted);
    font-size:14px;
    line-height:1.7;
    border:1px solid var(--apps-line);
    border-top:none;
    border-radius:0 0 var(--apps-radius-md) var(--apps-radius-md);
    background:rgba(10,30,61,.4);
}
.page-products .apps-timeline__body p{
    margin:0;
}
.page-products .apps-quickstart{
    display:grid;
    grid-template-columns:1fr;
    gap:40px;
    align-items:center;
}
.page-products .apps-steps{
    list-style:none;
    margin:0;
    padding:0;
    display:grid;
    gap:0;
}
.page-products .apps-steps__item{
    display:flex;
    gap:16px;
    padding:22px 0;
    border-bottom:1px solid var(--apps-line);
}
.page-products .apps-steps__item:last-child{
    border-bottom:none;
}
.page-products .apps-steps__num{
    font-family:var(--font-mono);
    font-size:28px;
    font-weight:700;
    color:var(--color-gold);
    line-height:1;
    min-width:50px;
    padding-top:2px;
}
.page-products .apps-steps__title{
    font-family:var(--font-head);
    font-size:16px;
    font-weight:600;
    color:var(--color-text);
    margin:0 0 6px;
}
.page-products .apps-steps__desc{
    font-size:14px;
    color:var(--color-muted);
    line-height:1.7;
    margin:0;
}
.page-products .apps-overview{
    max-width:calc(var(--container-max) + 48px);
    margin:0 auto;
    padding:60px 24px 72px;
}
.page-products .apps-overview__header{
    align-items:flex-start;
    gap:18px;
    margin-bottom:24px;
}
.page-products .apps-overview__content{
    display:grid;
    grid-template-columns:1fr;
    gap:16px;
    max-width:720px;
    margin-bottom:36px;
}
.page-products .apps-overview__content p{
    font-size:15px;
    color:var(--color-muted);
    line-height:1.8;
    margin:0;
}
.page-products .apps-overview__content a{
    color:var(--color-gold);
    text-decoration:none;
    border-bottom:1px solid transparent;
    transition:border-color .3s var(--ease);
}
.page-products .apps-overview__content a:hover{
    border-bottom-color:var(--color-gold);
}
.page-products .apps-overview__media img{
    max-height:260px;
}
@media (min-width:640px){
    .page-products .apps-cards{
        grid-template-columns:repeat(2,1fr);
    }
    .page-products .apps-overview__content{
        grid-template-columns:1fr 1fr;
        gap:28px;
    }
}
@media (min-width:960px){
    .page-products .apps-hero{
        grid-template-columns:minmax(0,6fr) minmax(0,5fr);
        gap:52px;
        align-items:center;
        padding-top:60px;
    }
    .page-products .apps-hero__title{
        font-size:38px;
    }
    .page-products .apps-hero__img{
        max-width:360px;
    }
    .page-products .apps-section{
        padding:80px 32px;
    }
    .page-products .apps-cards{
        grid-template-columns:repeat(4,1fr);
    }
    .page-products .apps-compat{
        grid-template-columns:minmax(0,5fr) minmax(0,6fr);
        gap:56px;
    }
    .page-products .apps-changelog{
        grid-template-columns:minmax(0,6fr) minmax(0,5fr);
        gap:56px;
    }
    .page-products .apps-quickstart{
        grid-template-columns:minmax(0,5fr) minmax(0,6fr);
        gap:56px;
    }
    .page-products .apps-overview{
        padding:80px 32px 96px;
    }
    .page-products .apps-overview__media img{
        max-height:320px;
    }
}
@media (prefers-reduced-motion:reduce){
    .page-products *,
    .page-products *::before,
    .page-products *::after{
        transition:none !important;
        animation:none !important;
    }
}