/* ==========================================
   FISUN.PRO v2.1
   Executive Light Theme
========================================== */


:root {

    --bg: #f7f8fb;

    --surface: #ffffff;

    --text: #111827;

    --muted: #6b7280;

    --border: #e5e7eb;

    --accent: #2563eb;

    --accent-light: #eff6ff;

    --shadow:
        0 20px 50px rgba(15,23,42,.08);

}



* {

    box-sizing:border-box;

}



html {

    scroll-behavior:smooth;

}



body {

    margin:0;

    background:
    var(--bg);

    color:
    var(--text);

    font-family:
    Inter,
    Arial,
    sans-serif;

    line-height:1.6;

}




/* =====================
   NAV
===================== */


.nav {

    height:80px;

    max-width:1200px;

    margin:auto;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 30px;

}



.logo {

    font-family:
    "Space Grotesk";

    font-size:32px;

    font-weight:700;

}



.logo span {

    color:
    var(--accent);

}



.nav-links {

    display:flex;

    gap:35px;

}



.nav-links a,
.language a {

    text-decoration:none;

    color:
    var(--muted);

    font-weight:500;

}



.nav-links a:hover,
.language a:hover {

    color:
    var(--accent);

}





/* =====================
   HERO
===================== */


.hero {

    padding:
    60px 30px 100px;

}



.hero-content {

    max-width:1200px;

    margin:auto;

    display:grid;

    grid-template-columns:
    1fr 420px;

    gap:80px;

    align-items:center;

}



.tag {

    color:
    var(--accent);

    font-weight:700;

    letter-spacing:1.5px;

    font-size:13px;

}



.hero h1 {

    font-family:
    "Space Grotesk";

    font-size:
    clamp(55px,8vw,90px);

    line-height:.95;

    margin:
    25px 0;

    letter-spacing:-3px;

}



.hero h2 {

    font-size:34px;

    line-height:1.2;

    font-weight:600;

    max-width:700px;

}



.lead {

    margin-top:30px;

    font-size:20px;

    color:
    var(--muted);

    max-width:650px;

}




/* Buttons */


.buttons {

    display:flex;

    gap:18px;

    margin-top:40px;

}



.btn {

    padding:
    15px 28px;

    border-radius:12px;

    text-decoration:none;

    font-weight:600;

}



.primary {

    background:
    var(--accent);

    color:white;

}



.secondary {

    background:white;

    border:
    1px solid var(--border);

    color:
    var(--text);

}





/* PHOTO */


.hero-photo {

    position:relative;

}



.photo-placeholder {

    width:420px;

    height:520px;

    border-radius:30px;

    background:
    linear-gradient(
    135deg,
    #e5e7eb,
    #ffffff
    );

    display:flex;

    justify-content:center;

    align-items:center;

    color:#9ca3af;

    font-size:18px;

    font-weight:600;

}



.hero-photo img {

    width:100%;

    border-radius:30px;

}




.status-card {

    position:absolute;

    bottom:-35px;

    left:-50px;

    background:white;

    padding:25px;

    width:280px;

    border-radius:20px;

    box-shadow:
    var(--shadow);

}



.status-card span {

    display:inline-block;

    width:10px;

    height:10px;

    border-radius:50%;

    background:#22c55e;

    margin-right:8px;

}



.status-card p {

    color:
    var(--muted);

    margin-bottom:0;

}





/* =====================
   METRICS
===================== */


.metrics {

    max-width:1200px;

    margin:auto;

    padding:
    0 30px 100px;

    display:grid;

    grid-template-columns:
    repeat(4,1fr);

    gap:20px;

}



.metrics div {

    background:white;

    padding:35px;

    border-radius:20px;

    border:
    1px solid var(--border);

}



.metrics strong {

    display:block;

    font-size:48px;

    font-family:
    "Space Grotesk";

}



.metrics span {

    color:
    var(--muted);

}





/* =====================
   SECTIONS
===================== */


.section {

    max-width:1200px;

    margin:auto;

    padding:
    90px 30px;

}



.section-title {

    font-size:13px;

    font-weight:700;

    color:
    var(--accent);

    letter-spacing:2px;

    margin-bottom:50px;

}



.two-columns {

    display:grid;

    grid-template-columns:
    1fr 1fr;

    gap:70px;

}



.big-text {

    font-size:42px;

    line-height:1.2;

    font-weight:600;

}





/* =====================
   CASES
===================== */


.cases {

    display:grid;

    grid-template-columns:
    repeat(2,1fr);

    gap:25px;

}



.case {

    background:white;

    padding:40px;

    border-radius:25px;

    border:
    1px solid var(--border);

    transition:.3s;

}



.case:hover {

    transform:translateY(-5px);

    box-shadow:
    var(--shadow);

}



.case-number {

    color:
    var(--accent);

    font-weight:700;

}



.case h3 {

    font-size:26px;

}





/* =====================
   TIMELINE
===================== */


.timeline div {

    padding:
    30px 0;

    border-bottom:
    1px solid var(--border);

}



.timeline strong {

    color:
    var(--accent);

}





/* =====================
   PRINCIPLES
===================== */


.principles {

    display:grid;

    grid-template-columns:
    repeat(4,1fr);

    gap:20px;

}



.principles div {

    background:white;

    padding:35px;

    border-radius:20px;

}





/* =====================
   CONTACT
===================== */


.contact {

    background:
    #111827;

    color:white;

    border-radius:35px;

    padding:70px;

    text-align:center;

}



.contact a {

    color:white;

    font-size:24px;

}





footer {

    text-align:center;

    padding:40px;

    color:
    var(--muted);

}





/* =====================
   MOBILE
===================== */


@media(max-width:900px){


.hero-content {

grid-template-columns:1fr;

}



.hero-photo {

order:-1;

}



.photo-placeholder {

width:100%;

height:420px;

}



.metrics {

grid-template-columns:
1fr 1fr;

}



.cases {

grid-template-columns:1fr;

}



.two-columns {

grid-template-columns:1fr;

}



.principles {

grid-template-columns:1fr;

}



.nav-links {

display:none;

}


}

/* =====================================
   FISUN.PRO v2.2 POLISH
===================================== */



/* =====================
   PHOTO FIX
===================== */


.hero-photo {

    min-height:520px;

}


.hero-photo img {

    display:block;

    width:100%;

    height:520px;

    object-fit:cover;

    border-radius:30px;

}



.photo-placeholder {

    display:none;

    width:420px;

    height:520px;

    border-radius:30px;

    background:
    linear-gradient(
    135deg,
    #e5e7eb,
    #ffffff
    );

    align-items:center;

    justify-content:center;

    color:#9ca3af;

    font-weight:600;

    letter-spacing:2px;

}





/* если фото отсутствует */

.hero-photo img[style*="display: none"] 
+ .photo-placeholder {

    display:flex;

}





/* =====================
   CASES POLISH
===================== */


.case {

    min-height:360px;

}



.case p {

    color:
    var(--muted);

}



.case ul {

    padding-left:20px;

    margin-top:25px;

}



.case li {

    margin-bottom:10px;

    color:#374151;

}





/* =====================
   TIMELINE POLISH
===================== */


.timeline div {

    position:relative;

    padding-left:30px;

}



.timeline div::before {

    content:"";

    position:absolute;

    left:0;

    top:38px;

    width:8px;

    height:8px;

    background:
    var(--accent);

    border-radius:50%;

}





.timeline p {

    max-width:700px;

    color:
    var(--muted);

}





/* =====================
   HERO IMPROVEMENT
===================== */


.hero h2 {

    max-width:650px;

    letter-spacing:-0.5px;

}



.lead {

    max-width:620px;

}



.executive-proof {

    padding-top:20px;

}





/* =====================
   CONTACT
===================== */


.contact h2 {

    font-family:
    "Space Grotesk";

    font-size:42px;

}



.contact p {

    max-width:600px;

    margin:
    20px auto 35px;

    color:#d1d5db;

}





/* =====================
   LINKS
===================== */


a {

    transition:.2s ease;

}





.btn:hover {

    transform:translateY(-2px);

}





/* =====================
   MOBILE FIX
===================== */


@media(max-width:900px){



.hero {

    padding-top:30px;

}



.hero-photo {

    min-height:auto;

}



.hero-photo img,
.photo-placeholder {

    width:100%;

    height:420px;

}



.status-card {

    position:relative;

    left:auto;

    bottom:auto;

    margin:
    -30px 20px 0;

    width:auto;

}



.hero h1 {

    letter-spacing:-2px;

}



.hero h2 {

    font-size:26px;

}



.big-text {

    font-size:32px;

}



.metrics {

    grid-template-columns:1fr;

}



.contact {

    padding:40px 25px;

}



.contact h2 {

    font-size:30px;

}


}