/* =============================================================
   SupremeApp — Company site stylesheet (light, Yandex-style)
   Shared by: index.html, apps.html, services.html, contacts.html
   Brand color: #ff5722
   ============================================================= */

:root{
    --bg:        #f4f5f7;
    --surface:   #ffffff;
    --ink:       #1a1b1e;
    --muted:     #70737a;
    --line:      #e8e9ed;
    --brand:     #ff5722;
    --brand-dark:#e64a19;
    --brand-soft:#fff0ea;
    --grad:      linear-gradient(120deg,#ff5722 0%,#ff9800 100%);
    --glow:      rgba(255,87,34,.3);
    --radius:    16px;
    --shadow-sm: 0 1px 2px rgba(20,20,25,.05), 0 1px 3px rgba(20,20,25,.06);
    --shadow-md: 0 6px 20px rgba(20,20,25,.08);
    --shadow-lg: 0 16px 44px rgba(20,20,25,.12);
    --font:      'Manrope','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}

*,*::before,*::after{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
    font-family:var(--font);
    background:var(--bg);
    color:var(--ink);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ text-decoration:none; color:inherit; }
ul{ list-style:none; }

.container{ width:100%; max-width:1140px; margin:0 auto; padding:0 20px; }

/* ============ BUTTONS ============ */
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:12px 24px;
    border-radius:12px;
    font-family:var(--font);
    font-size:.95rem;
    font-weight:700;
    line-height:1.2;
    border:none;
    cursor:pointer;
    transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
    white-space:nowrap;
}
.btn:active{ transform:scale(.97); }

.btn-primary{
    background:var(--brand);
    color:#fff;
    box-shadow:0 8px 20px var(--glow);
}
.btn-primary:hover{ background:var(--brand-dark); transform:translateY(-2px); }

.btn-ghost{
    background:#fff;
    color:var(--brand);
    border:1px solid var(--line);
}
.btn-ghost:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:#d9dade; }

.btn-dark{
    background:var(--ink);
    color:#fff;
    box-shadow:0 8px 20px rgba(20,20,25,.18);
}
.btn-dark:hover{ transform:translateY(-2px); }

.btn-light{
    background:var(--brand);
    color:#fff;
    box-shadow:0 8px 20px var(--glow);
}
.btn-light:hover{ background:var(--brand-dark); transform:translateY(-2px); }

/* ============ HEADER / NAV ============ */
.site-header{
    position:sticky;
    top:0;
    z-index:100;
    background:rgba(255,255,255,.94);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
}
.header-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding-top:14px;
    padding-bottom:14px;
}

.brand{
    display:flex;
    align-items:center;
    gap:10px;
    color:var(--ink);
    font-weight:800;
    font-size:1.15rem;
    letter-spacing:.2px;
}
.brand img{
    width:34px;
    height:34px;
    border-radius:50%;
    object-fit:cover;
    box-shadow:0 2px 8px rgba(20,20,25,.12);
}
.brand-accent{
    background:var(--grad);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

.site-nav{ display:flex; align-items:center; gap:6px; }
.site-nav a{
    color:var(--muted);
    font-size:.92rem;
    font-weight:600;
    padding:9px 16px;
    border-radius:10px;
    transition:color .18s ease, background .18s ease;
}
.site-nav a:hover{ color:var(--ink); background:#f3f4f6; }
.site-nav a.active{
    color:var(--brand);
    background:var(--brand-soft);
}

.nav-toggle{
    display:none;
    background:none;
    border:1px solid var(--line);
    color:var(--ink);
    width:42px;
    height:42px;
    border-radius:10px;
    font-size:1.05rem;
    cursor:pointer;
}

/* ============ HERO ============ */
.hero{
    position:relative;
    background:
        radial-gradient(720px 380px at 50% -120px, rgba(255,87,34,.12) 0%, transparent 65%),
        #ffffff;
    overflow:hidden;
}
.hero-inner{
    padding-top:84px;
    padding-bottom:72px;
    text-align:center;
}

.hero-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 16px;
    border-radius:100px;
    background:var(--brand-soft);
    color:var(--brand);
    font-size:.8rem;
    font-weight:700;
    letter-spacing:.4px;
    text-transform:uppercase;
    margin-bottom:22px;
}
.hero-badge::before{
    content:"";
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--brand);
}

.hero h1{
    font-size:clamp(2rem,5vw,3.3rem);
    font-weight:800;
    line-height:1.12;
    letter-spacing:-.5px;
    color:var(--ink);
    margin-bottom:18px;
}
.gradient-text{
    background:var(--grad);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

.hero p{
    max-width:660px;
    margin:0 auto 30px;
    color:var(--muted);
    font-size:1.05rem;
}

.hero-actions{ display:flex; justify-content:center; gap:14px; flex-wrap:wrap; }

.hero-stats{
    display:flex;
    justify-content:center;
    gap:clamp(24px,6vw,72px);
    flex-wrap:wrap;
    margin-top:48px;
}
.stat{ display:flex; flex-direction:column; align-items:center; gap:2px; }
.stat b{
    font-size:1.7rem;
    font-weight:800;
    color:var(--brand);
}
.stat span{ font-size:.84rem; color:var(--muted); }

/* ============ SECTIONS ============ */
.section{ padding:68px 0; }
.section-alt{ background:var(--surface); }
.section-tint{
    background:
        radial-gradient(640px 320px at 90% -20%, rgba(255,87,34,.10) 0%, transparent 60%),
        #ffffff;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
}

.section-head{ text-align:center; max-width:680px; margin:0 auto 44px; }
.section-head h2{
    font-size:clamp(1.6rem,3.4vw,2.1rem);
    font-weight:800;
    letter-spacing:-.3px;
    color:var(--ink);
    margin-bottom:12px;
}
.section-head p{ color:var(--muted); font-size:.98rem; }

/* ============ GRIDS ============ */
.grid-3{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}
.grid-2{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px;
}
.grid-4{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
}

/* ============ CARDS ============ */
.card{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:26px;
    box-shadow:var(--shadow-sm);
    transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover{
    transform:translateY(-3px);
    box-shadow:var(--shadow-md);
    border-color:#d9dade;
}
.card-icon{
    width:52px;
    height:52px;
    border-radius:14px;
    background:var(--grad);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.2rem;
    margin-bottom:16px;
    box-shadow:0 8px 18px var(--glow);
}
.card h3{ font-size:1.05rem; font-weight:700; color:var(--ink); margin-bottom:8px; }
.card p{ font-size:.9rem; color:var(--muted); }

/* ============ APP CARD ============ */
.app-card{
    display:flex;
    flex-direction:column;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:18px;
    box-shadow:var(--shadow-sm);
    transition:transform .2s ease, box-shadow .2s ease;
}
.app-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }

.app-icon{
    width:56px;
    height:56px;
    border-radius:14px;
    overflow:hidden;
    background:#f0f1f3;
    box-shadow:0 2px 8px rgba(20,20,25,.10);
    margin-bottom:14px;
    flex-shrink:0;
}
.app-icon img{ width:100%; height:100%; object-fit:cover; }
.app-name{ font-size:.98rem; font-weight:700; color:var(--ink); margin-bottom:6px; }
.app-desc{ font-size:.84rem; color:var(--muted); margin-bottom:14px; flex:1; }

.app-link{
    display:inline-flex;
    align-items:center;
    gap:7px;
    font-size:.84rem;
    font-weight:700;
    color:var(--brand);
    transition:gap .18s ease;
}
.app-link:hover{ gap:10px; }

/* ============ PAGE HERO (subpages) ============ */
.page-hero{
    background:#ffffff;
    border-bottom:1px solid var(--line);
}
.page-hero-inner{
    padding-top:52px;
    padding-bottom:52px;
    text-align:center;
}
.page-hero h1{
    font-size:clamp(1.8rem,4vw,2.4rem);
    font-weight:800;
    letter-spacing:-.3px;
    color:var(--ink);
    margin-bottom:12px;
}
.page-hero p{
    max-width:640px;
    margin:0 auto;
    color:var(--muted);
    font-size:.98rem;
}

/* ============ CATEGORY on apps.html ============ */
.category-block{ margin-bottom:44px; }
.category-title{
    display:flex;
    align-items:center;
    gap:12px;
    font-size:1.25rem;
    font-weight:800;
    color:var(--ink);
    margin-bottom:18px;
}
.category-title::before{
    content:"";
    width:10px;
    height:26px;
    border-radius:6px;
    background:var(--grad);
}

/* ============ CONTACT CARDS ============ */
.contact-card{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:24px;
    text-align:center;
    box-shadow:var(--shadow-sm);
    transition:transform .2s ease, box-shadow .2s ease;
}
.contact-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.contact-card .card-icon{ margin:0 auto 14px; }
.contact-card h3{ font-size:1rem; font-weight:700; color:var(--ink); margin-bottom:4px; }
.contact-card p{ font-size:.92rem; color:var(--muted); }
.contact-card a{ font-size:.9rem; color:var(--muted); transition:color .18s ease; }
.contact-card a:hover{ color:var(--brand); }
.contact-note{ font-size:.8rem; color:var(--muted); opacity:.85; margin-top:8px; }
.contact-card:hover{ text-decoration:none; }

/* ============ CTA BANNER ============ */
.cta-banner{
    position:relative;
    border-radius:20px;
    padding:48px 40px;
    text-align:center;
    color:#fff;
    background:var(--grad);
    box-shadow:0 20px 44px var(--glow);
    overflow:hidden;
}
.cta-banner h2{ font-size:clamp(1.4rem,3vw,1.9rem); font-weight:800; margin-bottom:10px; }
.cta-banner p{ color:rgba(255,255,255,.9); margin-bottom:24px; }
.cta-banner .btn{
    background:#fff;
    color:var(--brand);
    box-shadow:0 8px 20px rgba(0,0,0,.16);
}
.cta-banner .btn:hover{ background:#fff7f3; }

/* ============ FAQ ============ */
.faq-list{ max-width:780px; margin:0 auto; }
.faq-item{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:14px;
    margin-bottom:10px;
    box-shadow:var(--shadow-sm);
    overflow:hidden;
    transition:box-shadow .2s ease;
}
.faq-item:hover{ box-shadow:var(--shadow-md); }
.faq-item summary{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:16px 20px;
    cursor:pointer;
    font-weight:700;
    font-size:.95rem;
    color:var(--ink);
    list-style:none;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::marker{ content:none; }
.faq-item summary::after{
    content:"\f078";
    font-family:"Font Awesome 6 Free";
    font-weight:900;
    color:var(--brand);
    font-size:.8rem;
    transition:transform .2s ease;
    flex-shrink:0;
}
.faq-item[open] summary::after{ transform:rotate(180deg); }
.faq-item[open] summary{ color:var(--brand); }
.faq-item p{
    padding:0 20px 18px;
    font-size:.9rem;
    color:var(--muted);
    line-height:1.6;
}

/* ============ FOOTER ============ */
.site-footer{
    background:#fafafa;
    border-top:1px solid var(--line);
    margin-top:72px;
}
.footer-inner{
    display:grid;
    grid-template-columns:1.6fr 1fr 1fr;
    gap:36px;
    padding:56px 0 36px;
}
.footer-brand{ margin-bottom:14px; }
.footer-about{ font-size:.88rem; line-height:1.7; color:var(--muted); }
.footer-title{
    color:var(--ink);
    font-size:.95rem;
    font-weight:700;
    margin-bottom:14px;
}
.footer-links li{ margin-bottom:8px; }
.footer-links a{
    font-size:.88rem;
    color:var(--muted);
    transition:color .18s ease;
}
.footer-links a:hover{ color:var(--brand); }
.footer-contacts li{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:.88rem;
    color:var(--muted);
    margin-bottom:10px;
}
.footer-contacts i{ color:var(--brand); width:16px; text-align:center; }
.footer-contacts a{ transition:color .18s ease; }
.footer-contacts a:hover{ color:var(--brand); }

.footer-bottom{
    border-top:1px solid var(--line);
    padding:20px 0;
    text-align:center;
    font-size:.82rem;
    color:var(--muted);
}
.footer-bottom a{ color:var(--brand); }

/* ============ RESPONSIVE ============ */
@media(max-width:960px){
    .grid-3{ grid-template-columns:repeat(2,1fr); }
    .grid-4{ grid-template-columns:repeat(2,1fr); }
    .footer-inner{ grid-template-columns:1fr 1fr; }
}

@media(max-width:720px){
    .section{ padding:48px 0; }

    .nav-toggle{ display:flex; align-items:center; justify-content:center; }

    .site-nav{
        position:absolute;
        top:100%;
        left:0;
        right:0;
        flex-direction:column;
        align-items:stretch;
        gap:4px;
        padding:12px 20px 18px;
        background:#ffffff;
        border-bottom:1px solid var(--line);
        box-shadow:var(--shadow-lg);
        transform:translateY(-8px);
        opacity:0;
        visibility:hidden;
        transition:transform .2s ease, opacity .2s ease, visibility .2s ease;
    }
    .site-nav.open{
        transform:translateY(0);
        opacity:1;
        visibility:visible;
    }
    .site-nav a:hover{ background:#f3f4f6; }

    .grid-3,.grid-2,.grid-4{ grid-template-columns:1fr; }
    .hero-inner{ padding-top:56px; padding-bottom:52px; }
    .cta-banner{ padding:36px 22px; }
    .footer-inner{ grid-template-columns:1fr; gap:28px; }
    .page-hero-inner{ padding-top:40px; padding-bottom:40px; }
}