:root {
    --bg-color:#0b0f19;
    --card-bg:#151c2c;
    --accent:#00e676;
    --accent-hover:#00c853;
    --text-main:#f8fafc;
    --text-muted:#94a3b8;
    --border-color:#222f47;
    --accent-blue:#38bdf8
}

*,*::before,*::after {
    box-sizing:border-box;
    margin:0;
    padding:0;
    font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif
}

body {
    background:var(--bg-color);
    color:var(--text-main);
    line-height:1.6;
    display:flex;
    flex-direction:column;
    align-items:center;
    min-height:100vh;
    overflow-x:hidden
}

.hdr {
    width:100%;
    background:#0b0f19;
    border-bottom:1px solid #222f47;
    position:sticky;
    top:0;
    z-index:1000
}

.hdr-in {
    max-width:960px;
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:12px 16px
}

.hdr-logo {
    font-size:1.8rem;
    font-weight:900;
    color:#fff;
    text-decoration:none;
    letter-spacing:-1px;
    line-height:1
}

.hdr-nav {
    display:flex;
    gap:24px;
    align-items:center
}

.hdr-nav a {
    color:#f8fafc;
    text-decoration:none;
    font-size:0.95rem;
    font-weight:600;
    transition:color 0.2s ease
}

.hdr-nav a:hover {
    color:#00e676
}

.nav-toggle {
    display:none
}

.hamburger {
    display:none;
    flex-direction:column;
    justify-content:space-between;
    width:26px;
    height:18px;
    cursor:pointer
}

.hamburger span {
    display:block;
    height:2px;
    width:100%;
    background-color:#f8fafc;
    border-radius:2px;
    transition:all 0.3s ease
}

@media (max-width:768px) {
    .hamburger {
        display:flex
    }

    .hdr-nav {
        position:absolute;
        top:100%;
        left:0;
        width:100%;
        background:#151c2c;
        border-bottom:1px solid #222f47;
        flex-direction:column;
        gap:0;
        max-height:0;
        overflow:hidden;
        transition:max-height 0.3s cubic-bezier(0,1,0,1)
    }

    .hdr-nav a {
        padding:14px 20px;
        width:100%;
        border-bottom:1px solid rgba(255,255,255,0.05);
        font-size:0.9rem
    }

    .nav-toggle:checked~.hdr-nav {
        max-height:300px;
        transition:max-height 0.3s ease-in-out
    }

    .nav-toggle:checked~.hamburger span:nth-child(1) {
        transform:translateY(8px) rotate(45deg)
    }

    .nav-toggle:checked~.hamburger span:nth-child(2) {
        opacity:0
    }

    .nav-toggle:checked~.hamburger span:nth-child(3) {
        transform:translateY(-8px) rotate(-45deg)
    }

}

.container {
    width:100%;
    max-width:960px;
    margin:0 auto;
    padding:24px 15px
}

.app-card {
    background:var(--card-bg);
    border:1px solid var(--border-color);
    border-radius:20px;
    padding:28px 24px;
    text-align:center;
    box-shadow:0 15px 35px rgba(0,0,0,0.4);
    margin-bottom:24px
}

.app-header {
    display:flex;
    align-items:center;
    gap:16px;
    text-align:left;
    margin-bottom:20px
}

.app-icon {
    width:72px;
    height:72px;
    border-radius:18px;
    object-fit:cover;
    flex-shrink:0;
    box-shadow:0 8px 16px rgba(0,0,0,0.3)
}

.app-title h1 {
    font-size:1.25rem;
    font-weight:700;
    color:var(--text-main);
    line-height:1.3
}

.app-title p {
    font-size:0.85rem;
    color:var(--text-muted);
    margin-top:4px
}

.meta-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
    background:rgba(255,255,255,0.03);
    border:1px solid var(--border-color);
    padding:12px;
    border-radius:12px;
    margin-bottom:20px;
    text-align:center
}

.meta-item {
    font-size:0.75rem;
    color:var(--text-muted);
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center
}
.meta-item strong {
    display:block;
    font-size:0.9rem;
    color:var(--text-main);
    margin-top:2px
}

.feature-tags {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    column-gap:10px;
    row-gap:12px;
    margin-bottom:20px;
}

.tag {
    background:rgba(0,230,118,0.1);
    color:var(--accent);
    border:1px solid rgba(0,230,118,0.2);
    padding:6px 12px;
    border-radius:20px;
    font-size:0.8rem;
    font-weight:600;
    line-height:1.2;
    white-space:nowrap;
}

.btn-download {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    width:100%;
    padding:16px;
    background:var(--accent);
    color:#05130b;
    font-weight:800;
    font-size:1.1rem;
    text-decoration:none;
    border-radius:14px;
    transition:background 0.2s ease,transform 0.2s ease;
    box-shadow:0 6px 20px rgba(0,230,118,0.35)
}

@media (max-width:600px){
    .btn-download{
        padding:14px 12px;
        font-size:1rem;
        line-height:1.3;
        text-align:center;
    }
}

.btn-download:hover {
    background:var(--accent-hover);
    transform:translateY(-2px)
}

.footer-note {
    margin-top:14px;
    font-size:0.78rem;
    color:var(--text-muted)
}




.heading-icon-box {
    width:100px;
    height:100px;
    margin:0 auto 18px;
    display:grid;
    place-items:center;
    background:rgba(0,230,118,.08);
    border:1px solid rgba(0,230,118,.2);
    border-radius:20px;
    color:var(--accent);
}

.heading-icon-box svg {
    width:60px;
    height:60px;
    fill:currentColor;
}

@media (max-width:600px) {
    .heading-icon-box {
        width:78px;
        height:78px;
        margin-bottom:14px;
    }

    .heading-icon-box svg {
        width:48px;
        height:48px;
    }
}

.seo-box {
    background:var(--card-bg);
    border:1px solid var(--border-color);
    border-radius:20px;
    padding:24px;
    color:var(--text-muted);
    font-size:0.95rem
}

@keyframes headingGradient {
    0%   { color:var(--accent); }
    25%  { color:#38bdf8; }
    50%  { color:#a855f7; }
    75%  { color:#f43f5e; }
    100% { color:var(--accent); }
}

.seo-box h2 {
    position:relative;
    color:var(--accent);
    font-size:1.25rem;
    text-align:center;
    margin:28px 0 14px;
    padding:10px 12px;
    background:rgba(0,230,118,0.04);
    border-radius:8px;
    line-height:1.4;
    animation:headingGradient 6s linear infinite;
}
.seo-box h2:first-of-type {
    margin-top:0
}

.seo-box p {
    margin-bottom:14px;
    text-align:justify
}

.seo-box ul,.seo-box ol {
    margin-left:20px;
    margin-bottom:14px
}

.seo-box li {
    margin-bottom:6px
}

.seo-box figure {
    margin:18px 0;
    text-align:center
}

.seo-box img {
    max-width:100%;
    height:auto;
    border-radius:12px;
    display:inline-block
}

.faq-section {
    margin:2.5rem 0 2rem 0
}

.faq-header-left {
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:1rem
}

.faq-header-left h3 {
    font-size:1.2rem;
    font-weight:700;
    color:var(--text-main)
}

.faq-icon-help {
    width:20px;
    height:20px;
    fill:var(--accent)
}

.accordion-list {
    display:flex;
    flex-direction:column;
    gap:0.75rem;
    margin:1.5rem 0
}

details {
    background-color:rgba(255,255,255,0.02);
    border:1px solid var(--border-color);
    border-radius:6px;
    padding:0.8rem 1rem
}

summary {
    font-weight:600;
    font-size:0.95rem;
    color:var(--accent-blue);
    cursor:pointer;
    list-style:none;
    display:flex;
    justify-content:space-between;
    align-items:center
}

summary::-webkit-details-marker {
    display:none
}

summary::after {
    content:"+";
    font-size:1.1rem;
    color:var(--accent-blue)
}

details[open] summary::after {
    content:"−"
}

details .accordion-content {
    margin-top:0.75rem;
    font-size:0.9rem;
    color:var(--text-muted);
    line-height:1.5;
    text-align:left;
}

.data-safety-card {
    border:1px solid var(--border-color);
    border-radius:12px;
    padding:1.5rem;
    background-color:var(--card-bg);
    margin-bottom:2.5rem
}

.data-safety-card h3 {
    font-size:1.15rem;
    font-weight:700;
    margin-bottom:0.4rem;
    color:var(--text-main)
}

.data-safety-desc {
    font-size:0.85rem;
    color:var(--text-muted);
    margin-bottom:1.2rem
}

.safety-list {
    display:flex;
    flex-direction:column;
    gap:1rem
}

.safety-item {
    display:flex;
    align-items:flex-start;
    gap:12px;
    font-size:0.88rem;
    color:var(--text-muted)
}

.safety-icon {
    width:20px;
    height:20px;
    fill:var(--accent);
    flex-shrink:0;
    margin-top:2px
}

footer {
    width:100%;
    border-top:1px solid var(--border-color);
    margin-top:2rem
}

.footer-inner {
    max-width:960px;
    margin:auto;
    padding:32px 15px 22px;
    display:grid;
    grid-template-columns:1.5fr 1fr;
    gap:40px
}

.footer-brand h3 {
    margin:0 0 8px;
    color:var(--text-main);
    font-size:1.25rem;
    font-weight:800
}

.footer-brand p {
    margin:0;
    color:var(--text-muted);
    font-size:.85rem;
    line-height:1.6;
    max-width:460px
}

.footer-heading {
    margin:0 0 10px;
    color:var(--text-main);
    font-size:.9rem;
    font-weight:700
}

.footer-links {
    display:flex;
    flex-wrap:wrap;
    gap:8px 18px
}

.footer-links a {
    color:var(--text-muted);
    font-size:.85rem;
    text-decoration:none
}

.footer-links a:hover {
    color:var(--accent)
}

.footer-bottom {
    max-width:960px;
    margin:auto;
    padding:16px 15px 22px;
    border-top:1px solid var(--border-color);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    color:var(--text-muted);
    font-size:.78rem
}

.footer-socials {
    display:flex;
    gap:8px
}

.footer-social-icon {
    width:34px;
    height:34px;
    border:1px solid var(--border-color);
    border-radius:8px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--text-muted);
    text-decoration:none;
    transition:color .2s,border-color .2s
}

.footer-social-icon:hover {
    color:var(--accent);
    border-color:var(--accent)
}

.footer-social-icon svg {
    width:160px;
    height:16px;
    fill:currentColor
}

.breadcrumbs {
    display: flex;
    gap: 8px;
    font-size: 0.85rem;
    margin-bottom: 24px;
}

.breadcrumbs a {
    color: #38bdf8 !important;
    text-decoration: none !important;
}

.breadcrumbs span {
    color: #94a3b8;
}


@media(max-width:600px) {
    .footer-inner {
        grid-template-columns:1fr;
        gap:24px;
        padding-top:28px
    }

    .footer-bottom {
        flex-direction:column;
        align-items:flex-start
    }

}