/* ==========================================================
   AI Employee for Dentistry
   Version 1.1 - Animation Fix
   ========================================================== */

/* ==========================================================
   01. RESET
   ========================================================== */

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

html{
    scroll-behavior:smooth;
    scroll-padding-top:100px;
}

body{
    font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    font-size: var(--text-base);
    line-height:1.7;
    color:#1f2937;
    background:#fafafa;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    overflow-x:hidden;
}

img{
    display:block;
    max-width:100%;
}

picture{
    display:block;
}

a{
    text-decoration:none;
    color:inherit;
}

button{
    font:inherit;
    border:none;
    background:none;
    cursor:pointer;
}

ul{
    list-style:none;
}

section{
    position:relative;
}


/* ==========================================================
   02. VARIABLES
   ========================================================== */

:root{

    --accent:#0F766E;
    --accent-dark:#0a5f59;
    --accent-light:#e7f7f4;

    --text:#1f2937;
    --text-light:#6b7280;

    --white:#ffffff;

    --bg:#fafafa;

    --line:#e5e7eb;

    --radius: 22px;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --shadow: 0 30px 80px rgba(0,0,0,.16);
    --shadow-small: 0 10px 30px rgba(0,0,0,.10);

    --container:1400px; 

    --section:150px;

    --hero:72px;

    --h1: 72px;         
    --h2: 55px;         
    --h3: 50px;         
    --h4: 35px; 
    --text-large: 26px; 
    --text-base: 18px;  
    --text-small: 16px; 
    --text-tiny: 14px;  

}


/* ==========================================================
   03. LAYOUT
   ========================================================== */

.container{

    width:min(calc(100% - 48px),var(--container));

    margin:auto;

}

section{

    padding:var(--section) 0;

}

.section-small{

    padding:90px 0;

}

.section-header{

    max-width:1000px; 

    margin:0 auto 80px;

    text-align:center;

}

.section-header.left{

    text-align:left;

    margin-left:0;

}

/* ==========================================================
   04. TYPOGRAPHY
   ========================================================== */

h1{

    font-size:var(--h1);

    line-height:1.05;

    font-weight:800;

    letter-spacing:-2px;

    color:var(--text);

}

h2{

    font-size:var(--h2);

    line-height:1.1;

    font-weight:800;

    letter-spacing:-1px;

    color:var(--text);

}

h3{

    font-size:var(--h3);

    line-height:1.3;

    font-weight:700;

    color:var(--text);

}

h4{

    font-size:var(--h4);

    line-height:1.3;

    font-weight:700;

    color:var(--text);

}

p{

    color:var(--text-light);

    margin-top:22px;

    font-size: var(--text-large);

}

.lead{

    font-size: var(--h4);

    line-height:1.4;

    font-weight:800; 

}

.small{

    font-size: var(--text-small);

}

.center{

    text-align:center;

}

.accent{

    color:var(--accent);

}


/* ==========================================================
   05. BUTTONS
   ========================================================== */

.buttons{

    display:flex;
    justify-content:center;
    align-items:center;
    gap:20px;
    flex-wrap:wrap;
    margin-top:50px;

}

.button{

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    padding:18px 34px;
    transition:.3s;
    font-weight:700;
    height:72px;            
    border-radius:22px;     
}

.button-primary{

    background:var(--accent);

    color:#fff;

    box-shadow:var(--shadow-small);
    font-size:25px; 

}

.button-primary:hover{

    transform:translateY(-2px);

    background:var(--accent-dark);

}

.button-secondary{

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

    background:#fff;
    font-size:25px; 
}

.button-secondary:hover{

    background:#f6f6f6;

}


/* ==========================================================
   06. HEADER
   ========================================================== */

.header-inner{

    height:80px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}

.logo{

    display:flex;

    align-items:center;

    gap:16px;

    font-weight:700;

    font-size: var(--text-large);

}

.logo img{

    width:74px;

}

nav{

    display:flex;

    gap:38px;

}

nav a{

    position:relative;

    color:var(--text-light);

    transition:.25s;

}

nav a:hover{

    color:var(--accent);

}

nav a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:var(--accent);

    transition:.3s;

}

nav a:hover::after,
nav a.active::after{

    width:100%;

}

nav a.active{

    color:var(--accent);

}

/* ==========================================================
   07. HERO
   ========================================================== */

.hero{

    padding-top:180px;
    padding-bottom:130px;

}

.hero-grid{

    display:grid;

    grid-template-columns:1.05fr .95fr;

    align-items:center;

    gap:90px;

}

.hero-text{

    max-width:650px;

}

.hero-label{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 18px;

    border-radius:999px;

    background:var(--accent-light);

    color:var(--accent);

    font-size: var(--text-small);

    font-weight:700;

    margin-bottom:28px;

}

.hero p{

    margin-top:34px;

}

.hero-note{

    display:flex;

    align-items:center;

    gap:12px;

    margin-top:40px;

    font-size: var(--text-base);

    color:var(--text-light);

}

.hero-note svg{

    width:22px;

    height:22px;

    color:var(--accent);

}


/* ---------- Hero Image ---------- */

.hero-image{

    position:relative;

}

.hero-image img{

    width:100%;

    border-radius:32px;

    box-shadow:var(--shadow);

}

.hero-image::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:32px;

    border:1px solid rgba(255,255,255,.6);

    pointer-events:none;

}


/* ==========================================================
   08. COMMON IMAGE STYLE
   ========================================================== */

.image{
    overflow:hidden;
    border-radius:30px;
    box-shadow:var(--shadow);
    border:1px solid transparent;
    transition: var(--transition);
    will-change: transform, box-shadow, border-color;
}

.image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition: var(--transition);
}

.image:hover img{
    transform:scale(1.03);
}

.image:hover{
    box-shadow:var(--shadow);
    border:1px solid var(--accent);
}

/* ==========================================================
   09. INTRO
   ========================================================== */

.intro{

    background:#fff;

}

.intro-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

}

.intro-content{

    max-width:560px;

}

.intro-content h2{

    margin-bottom:24px;

}

.intro-list{

    margin-top:34px;

    display:flex;

    flex-direction:column;

    gap:22px;

}

.intro-list li{

    display:flex;

    gap:18px;

    align-items:flex-start;

}

.intro-list strong{

    display:block;

    margin-bottom:6px;

}


/* ==========================================================
   10. RESULTS
   ========================================================== */

.results-grid{

    display:grid;

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

    gap:28px;

    margin-top:80px;

}

.result{
    background:#fff;
    border-radius:24px;
    padding:38px;
    border:1px solid var(--line);
    transition: var(--transition);
    text-align:center;
    will-change: transform, box-shadow, border-color;
}

.result:hover{
    box-shadow:var(--shadow);
    border:1px solid var(--accent);
}

.result-number{

    font-size: var(--h2);
    font-weight:800;
    color:var(--accent);
    line-height:1;
    margin-bottom:20px;

    display:flex;
    justify-content:center;
    align-items:center;
    margin:0 auto 24px;

}

.result h3{

    font-size:29px;

    margin-bottom:14px;

}

.result p{

    font-size:24px;
    margin-top:0;

}


/* ==========================================================
   11. EMPLOYEE
   ========================================================== */

.employee{

    background:#fff;

}

.employee-grid{

    display:grid;

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

    gap:34px;

    margin-top:70px;

}

.employee-card{
    border:1px solid var(--line);
    border-radius:24px;
    padding:42px;
    transition: var(--transition);
    background:#fff;
    font-size: var(--h4);
    will-change: transform, box-shadow, border-color;
}

.employee-card:hover{
    box-shadow:var(--shadow);
    border:1px solid var(--accent);
}

.employee-card h3{

    margin-bottom:18px;
    font-size:30px;

}

.employee-card ul{

    margin-top:26px;

    display:flex;

    flex-direction:column;

    gap:16px;

}

.employee-card li{

    display:flex;

    gap:12px;

    align-items:flex-start;

}

.employee-card li::before{

    content:"✓";

    color:var(--accent);

    font-weight:700;

    flex:none;

}


/* ==========================================================
   12. TIMELINE
   ========================================================== */

.timeline{

    margin-top:90px;

    display:flex;

    flex-direction:column;

    gap:36px;

}

.timeline-item{

    display:flex;

    gap:36px;

    align-items:flex-start;

}

.timeline-number{

    width:72px;

    height:72px;

    border-radius:22px;

    background:var(--accent);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size: var(--h3);

    font-weight:500;

    flex:none;

}

.timeline-content{

    padding-top:8px;

}

.timeline-content h3{

    margin-bottom:14px;
    font-size: var(--h4);

}

/* ==========================================================
   13. TEAM
   ========================================================== */

.team{

    background:#f6f8f9;

}

.team-grid{

    display:grid;

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

    gap:30px;

    margin-top:80px;

}

.team-card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:26px;
    overflow:hidden;
    transition: var(--transition);
    will-change: transform, box-shadow, border-color;
}

.team-card:hover{
    box-shadow:var(--shadow);
    border:1px solid var(--accent);
}

.team-photo{

    aspect-ratio:4/3;

    overflow:hidden;

}

.team-photo img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition: var(--transition);
}

.team-card:hover .team-photo img{

    transform:scale(1.04);

}

.team-info{

    padding:34px;

}

.team-role{

    color:var(--accent);

    font-weight:700;

    font-size:22px;

    margin-bottom:10px;

}

.team-info p{

    margin-top:14px;

}


/* ==========================================================
   14. PRICING
   ========================================================== */

.pricing{

    background:#f6f8f9;

}

.price-grid{

    display:grid;

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

    gap:36px;

    margin-top:80px;

}

.price-card{
    background:#fff;
    border-radius:28px;
    padding:48px;
    box-shadow:var(--shadow-small);
    border:1px solid var(--line);
    transition: var(--transition);
    text-align:center;
    will-change: transform, box-shadow, border-color;
}

.price-card:hover{
    box-shadow:var(--shadow);
    border:1px solid var(--accent);
}

.price-title{

    font-size: var(--h3);

    font-weight:800;

    margin-bottom:12px;

}

.price-value{

    font-size: var(--h2);

    font-weight:800;

    color:var(--accent);

    margin:26px 0;

    line-height:1;

}

.price-period{

    font-size: var(--text-base);

    color:var(--text-light);

    margin-left:8px;

}

.price-list{

    display:flex;

    flex-direction:column;

    gap:18px;

    margin:36px 0 42px;

}

.price-list li{

    display:flex;

    gap:14px;

    align-items:flex-start;

}

.price-list li::before{

    content:"✓";

    color:var(--accent);

    font-weight:700;

    flex:none;

}


/* ==========================================================
   15. TRIAL
   ========================================================== */

.trial{

    background:#ffffff;

}

.trial-box{
    max-width:1100px;
    margin:0 auto;
    background:linear-gradient(135deg,#ffffff,#f5fbfa);
    border-radius:32px;
    padding:70px;
    text-align:center;
    border:1px solid var(--line);
    box-shadow:var(--shadow);
    transition: var(--transition);
    will-change: transform, box-shadow, border-color;
}

.trial-box:hover{
    box-shadow:var(--shadow);
    border:1px solid var(--accent);
}


.trial-box h2{

    margin-bottom:24px;

}

.trial-price{

    font-size: var(--h1);

    font-weight:800;

    color:var(--accent);

    margin:40px 0 16px;

}

.trial-box .button{

    margin-top:42px;

}


/* ==========================================================
   16. FAQ
   ========================================================== */

.faq{

    background:#ffffff;

}

.faq-list{

    max-width:900px;

    margin:80px auto 0;

}

.faq-item{
    background:#fff;
    border-radius:22px;
    margin-bottom:18px;
    overflow:hidden;
    border:1px solid var(--line);
    transition: var(--transition);
    will-change: transform, box-shadow, border-color;
}

.faq-item:hover{
    box-shadow:var(--shadow);
    border:1px solid var(--accent);
}

.faq-question{

    width:100%;

    text-align:left;

    padding:28px 34px;

    font-weight:700;

    display:flex;

    justify-content:space-between;

    align-items:center;
    font-size: var(--h4);

}

.faq-question::after{

    content:"+";

    font-size: var(--h3);

    color:var(--accent);

    transition:.3s;

}

.faq-item.active .faq-question::after{

    transform:rotate(45deg);

}

.faq-answer{

    max-height:0;

    overflow:hidden;

    transition:.35s;

    padding:0 34px;

}

.faq-answer p{

    margin:0;

    padding:0 0 28px;

}

.faq-item.active .faq-answer{

    max-height:400px;

}


/* ==========================================================
   17. CTA
   ========================================================== */

.cta{

    padding:170px 0;

    background:linear-gradient(135deg,#0F766E,#0b5f59);

    color:#fff;

}

.cta h2{

    color:#fff;

}

.cta p{

    color:rgba(255,255,255,.85);

}

.cta-inner{

    max-width:820px;

    margin:auto;

    text-align:center;

}

.cta .buttons{

    justify-content:center;

}

.cta .button-primary{

    background:#fff;

    color:var(--accent);

}

.cta .button-primary:hover{

    background:#f4f4f4;

}

.cta .button-secondary{

    color:#fff;

    border-color:rgba(255,255,255,.25);

    background:transparent;

}

.cta .button-secondary:hover{

    background:rgba(255,255,255,.08);

}


/* ==========================================================
   18. FOOTER
   ========================================================== */

footer{

    background:#ffffff;

    padding:70px 0;

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

}

.footer-grid{

    display:grid;

    grid-template-columns:2fr 1fr 1fr;

    gap:60px;

}

.footer-title{

    font-weight:700;

    margin-bottom:18px;

}

.footer-links{

    display:flex;

    flex-direction:column;

    gap:14px;

}

.footer-links a{

    color:var(--text-light);

    transition:.25s;

}

.footer-links a:hover{

    color:var(--accent);

}

.footer-bottom{

    margin-top:60px;

    padding-top:26px;

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

    display:flex;

    justify-content:space-between;

    align-items:center;

    color:var(--text-light);

    font-size: var(--text-small);

}

/* ==========================================================
   19. REVEAL ANIMATION (Refactored)
   ========================================================== */

/* Используем анимацию вместо transition для появления. 
   Это гарантирует, что после завершения анимации (через 0.8с) 
   свойство transition в классах карточек (var(--transition)) 
   будет работать идеально и без конфликтов. */

/* 
   Анимация появления теперь не трогает свойство transform напрямую в финальном состоянии,
   чтобы не блокировать hover-эффект подъема.
*/
@keyframes revealFadeUp {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.reveal {
    opacity: 0;
}

.reveal.show {
    /* Используем both вместо forwards и ограничиваем время жизни анимации, 
       либо просто гарантируем, что hover перекроет transform */
    animation: revealFadeUp 0.8s ease;
    opacity: 1; /* Фиксируем финальное состояние без блокировки transform */
}

/* ГАРАНТИЯ ПОДЪЕМА: Явно переопределяем transform для всех карточек при наведении */
.result:hover, 
.employee-card:hover, 
.team-card:hover, 
.price-card:hover, 
.trial-box:hover, 
.faq-item:hover, 
.image:hover {
    transform: translateY(-8px) !important;
}

/* ==========================================================
   20. BACK TO TOP
   ========================================================== */

#toTop{

    position:fixed;

    right:30px;
    bottom:30px;

    width:56px;
    height:56px;

    border-radius:50%;

    background:var(--accent);

    color:#fff;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size: var(--text-large);

    box-shadow:var(--shadow);

    opacity:0;
    visibility:hidden;

    transform:translateY(15px);

    transition:.3s;

    z-index:1000;

}

#toTop.show{

    opacity:1;
    visibility:visible;
    transform:translateY(0);

}

#toTop:hover{

    background:var(--accent-dark);

}


/* ==========================================================
   21. SELECTION
   ========================================================== */

::selection{

    background:var(--accent);
    color:#fff;

}


/* ==========================================================
   22. SCROLLBAR
   ========================================================== */

::-webkit-scrollbar{

    width:12px;

}

::-webkit-scrollbar-track{

    background:#f2f2f2;

}

::-webkit-scrollbar-thumb{

    background:#b8c7c5;
    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--accent);

}


/* ==========================================================
   23. RESPONSIVE
   ========================================================== */

@media (max-width:1200px){

    :root{

        --h1: 64px;
        --h2: 48px;
        --h3: 30px;

    }

    .hero-grid,
    .intro-grid{

        gap:60px;

    }

}


@media (max-width:992px){

    :root{

        --section:120px;

        --h1: 52px;
        --h2: 40px;
        --h3: 28px;
        --text-large: 20px;
        --text-base: 17px;

    }

    nav{

        gap:22px;

        font-size: var(--text-small);

    }

    .hero-grid,
    .intro-grid,
    .employee-grid,
    .price-grid{

        grid-template-columns:1fr;

    }

    .results-grid{

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

    }

    .team-grid{

        grid-template-columns:1fr;

    }

    .footer-grid{

        grid-template-columns:1fr;

        gap:40px;

    }

    .hero{

        padding-top:150px;

    }

    .hero-text{

        max-width:100%;

    }

}


@media (max-width:768px){

    :root{

        --section:90px;

        --h1: 42px;
        --h2: 34px;
        --h3: 24px;
        --text-large: 19px;
        --text-base: 16px;

    }

    body{

        font-size: var(--text-base);

    }


    .container{

        width:min(calc(100% - 32px),var(--container));

    }


    .buttons{

        flex-direction:column;

        align-items:stretch;

    }

    .button{

        width:100%;

    }

    .results-grid{

        grid-template-columns:1fr;

    }

    .timeline-item{

        flex-direction:column;

        gap:24px;

    }

    .timeline-number{

        width:58px;
        height:58px;

        font-size: var(--text-large);

    }

    .trial-box{

        padding:40px 30px;

    }

    .price-card{

        padding:34px;

    }

    .faq-question{

        font-size: var(--text-base);

        padding:22px 24px;

    }

    .faq-answer{

        padding:0 24px;

    }

    .cta{

        padding:120px 0;

    }

    #toTop{

        right:18px;
        bottom:18px;

        width:48px;
        height:48px;

    }

}


@media (max-width:560px){

    :root {
        --h1: 38px;
        --h2: 30px;
        --h3: 22px;
        --text-large: 18px;
        --text-base: 15px;
    }

    .hero{

        padding-top:135px;

    }

    .hero-label{

        font-size: var(--text-tiny);

    }

    .lead{

        font-size: var(--text-large);

    }

    .price-value{

        font-size: var(--h2);

    }

    .trial-price{

        font-size: var(--h1);

    }

    nav{

        display:none;

    }

    .header-inner{

        height:78px;

    }

}


/* ==========================================================
   24. UTILITIES
   ========================================================== */

.mt-0{margin-top:0!important;}
.mt-20{margin-top:20px!important;}
.mt-40{margin-top:40px!important;}
.mt-60{margin-top:60px!important;}

.text-center{text-align:center;}
.text-left{text-align:left;}

.hidden{display:none;}

.rounded{

    border-radius:var(--radius);

}

.shadow{

    box-shadow:var(--shadow);

}

/* ==========================================================
   HEADER
   ========================================================== */

header{

    position:fixed;
    top:0;
    left:0;
    width:100%;

    z-index:1000;

    background:rgba(255,255,255,.35);

    backdrop-filter:blur(16px); 
    -webkit-backdrop-filter:blur(16px);

    border-bottom:1px solid rgba(255,255,255,.25);

    transition:
        transform .35s ease,
        background .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;

}

header.header-shadow{

    background:rgba(255,255,255,.88); 

    border-bottom:1px solid rgba(0,0,0,.05);

    box-shadow:
        0 12px 35px rgba(0,0,0,.06);

}

header.header-hidden{

    transform:translateY(-100%);

}
/* ==========================================================
   END
   ========================================================== */