/* =============================================
   Smart Office Pro — Landing Page
   Design: Claude-inspired, warm orange accent
   Font: Source Sans 3
   ============================================= */

/* --- Reset & base --- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
    font-family:'Source Sans 3',system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
    background:#FBF8F3;
    color:#2D2B28;
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
ul{list-style:none}
img{display:block;max-width:100%;height:auto}
address{font-style:normal}
button{cursor:pointer;font-family:inherit}

/* --- Container --- */
.container{max-width:1120px;margin:0 auto;padding:0 32px}

/* --- Reusable --- */
.label{
    font-size:12px;font-weight:600;letter-spacing:2.5px;
    text-transform:uppercase;color:#D4783C;margin-bottom:10px;
}
.heading-2{
    font-size:clamp(28px,4vw,44px);
    font-weight:700;line-height:1.12;
    letter-spacing:-.03em;color:#2D2B28;
}
.section-head{text-align:center;max-width:620px;margin:0 auto 56px}
.section-head__sub{font-size:15px;color:#7A756D;margin-top:14px;line-height:1.75}

/* --- Buttons --- */
.btn{
    display:inline-flex;align-items:center;gap:8px;
    padding:14px 30px;border-radius:12px;
    font-size:14px;font-weight:600;letter-spacing:.01em;
    transition:.3s ease;cursor:pointer;border:none;
}
.btn--primary{
    background:#D4783C;color:#fff;
    box-shadow:0 4px 20px rgba(212,120,60,.2);
}
.btn--primary:hover{background:#C06A30;box-shadow:0 6px 28px rgba(212,120,60,.3);transform:translateY(-1px)}
.btn--ghost{
    background:rgba(45,43,40,.05);
    border:1px solid rgba(45,43,40,.12);
    color:#5A5650;
}
.btn--ghost:hover{background:rgba(45,43,40,.08);color:#2D2B28;border-color:rgba(45,43,40,.2)}

/* ===== NAV ===== */
.nav{
    position:fixed;top:0;left:0;right:0;z-index:100;
    background:rgba(251,248,243,.88);
    backdrop-filter:saturate(180%) blur(20px);
    -webkit-backdrop-filter:saturate(180%) blur(20px);
    border-bottom:1px solid rgba(45,43,40,.06);
}
.nav__inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:700;color:#2D2B28;letter-spacing:-.01em}
.logo__icon{
    width:34px;height:34px;border-radius:10px;
    background:linear-gradient(135deg,#D4783C,#E8995E);
    display:flex;align-items:center;justify-content:center;
    color:#fff;font-size:16px;font-weight:800;
}
.nav__links{display:flex;gap:28px}
.nav__links a{font-size:13px;font-weight:500;color:#7A756D;transition:color .2s}
.nav__links a:hover{color:#2D2B28}
.nav__cta{
    font-size:13px;font-weight:600;color:#D4783C;
    padding:8px 18px;border-radius:10px;
    border:1.5px solid rgba(212,120,60,.3);
    transition:.25s;
}
.nav__cta:hover{background:rgba(212,120,60,.08);border-color:rgba(212,120,60,.5)}
.nav__burger{
    display:none;flex-direction:column;gap:5px;
    background:none;border:none;padding:6px;
}
.nav__burger span{display:block;width:20px;height:1.5px;background:#2D2B28;border-radius:2px;transition:.3s}
.nav__burger.open span:nth-child(1){transform:rotate(45deg) translate(4.5px,4.5px)}
.nav__burger.open span:nth-child(2){opacity:0}
.nav__burger.open span:nth-child(3){transform:rotate(-45deg) translate(4.5px,-4.5px)}

/* ===== HERO ===== */
.hero{
    position:relative;
    padding:140px 0 90px;
    overflow:hidden;
}
.hero__glow{
    position:absolute;top:-180px;left:50%;transform:translateX(-50%);
    width:800px;height:500px;
    background:radial-gradient(ellipse at center,rgba(212,120,60,.1) 0%,rgba(232,153,94,.04) 40%,transparent 70%);
    pointer-events:none;z-index:0;
    animation:glowPulse 8s ease-in-out infinite alternate;
}
.hero__glow--2{
    top:auto;bottom:-250px;right:-100px;left:auto;
    transform:none;
    width:500px;height:350px;
    background:radial-gradient(ellipse at center,rgba(212,120,60,.06) 0%,transparent 60%);
    animation-delay:-4s;
}
@keyframes glowPulse{
    0%{opacity:.6;transform:translateX(-50%) scale(1)}
    100%{opacity:1;transform:translateX(-50%) scale(1.06)}
}
.hero__pattern{
    position:absolute;inset:0;z-index:0;
    background-image:radial-gradient(rgba(45,43,40,.04) 1px,transparent 1px);
    background-size:28px 28px;
    mask-image:radial-gradient(ellipse at 50% 30%,black 20%,transparent 65%);
    -webkit-mask-image:radial-gradient(ellipse at 50% 30%,black 20%,transparent 65%);
}
.hero__center{
    position:relative;z-index:1;
    text-align:center;
    max-width:760px;
    margin:0 auto;
}
.hero__badge{
    display:inline-flex;align-items:center;gap:8px;
    padding:8px 20px;border-radius:100px;
    background:rgba(212,120,60,.08);
    border:1px solid rgba(212,120,60,.15);
    font-size:12px;font-weight:600;color:#D4783C;
    margin-bottom:28px;
}
.hero__dot{
    width:7px;height:7px;border-radius:50%;
    background:#D4783C;
    box-shadow:0 0 8px rgba(212,120,60,.5);
    animation:dotBlink 2.5s ease-in-out infinite;
}
@keyframes dotBlink{0%,100%{opacity:1}50%{opacity:.3}}
.hero__title{
    font-size:clamp(36px,5vw,54px);
    font-weight:700;line-height:1.1;
    letter-spacing:-.04em;
    color:#2D2B28;
    margin-bottom:22px;
}
.hero__title em{
    font-style:normal;
    background:linear-gradient(135deg,#D4783C 0%,#E8995E 50%,#C06A30 100%);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
}
.hero__text{
    font-size:17px;line-height:1.75;
    color:#7A756D;max-width:620px;
    margin:0 auto 30px;
}
.hero__actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.hero__trust-line{
    display:flex;align-items:center;gap:14px;
    margin-top:32px;justify-content:center;
}
.hero__avatars{display:flex}
.hero__avatar{
    width:34px;height:34px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:12px;font-weight:700;color:#fff;
    border:2.5px solid #FBF8F3;
    margin-right:-8px;
}
.hero__trust-text{font-size:13px;color:#7A756D;margin-left:8px}
.hero__trust-text strong{color:#2D2B28}

/* ===== PROCESS (moved up) ===== */
.process{padding:80px 0 100px}
.process__steps{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px;
}
.step{
    position:relative;
    background:#fff;
    border:1px solid rgba(45,43,40,.07);
    border-radius:20px;
    padding:36px 32px;
    transition:border-color .3s,transform .3s;
}
.step:hover{border-color:rgba(212,120,60,.2);transform:translateY(-3px)}
.step__top{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.step__num{
    width:44px;height:44px;border-radius:12px;
    background:linear-gradient(135deg,rgba(212,120,60,.1),rgba(212,120,60,.05));
    border:1px solid rgba(212,120,60,.12);
    display:flex;align-items:center;justify-content:center;
    font-size:16px;font-weight:700;color:#D4783C;
    flex-shrink:0;
}
.step h3{
    font-size:17px;font-weight:700;
    color:#2D2B28;
}
.step p{
    font-size:14px;line-height:1.7;
    color:#7A756D;margin-bottom:14px;
}
.step__time{
    font-size:11px;font-weight:600;
    color:#D4783C;
    padding:5px 12px;border-radius:8px;
    background:rgba(212,120,60,.06);
    border:1px solid rgba(212,120,60,.1);
    display:inline-block;
}

/* ===== SERVICES ===== */
.services{padding:80px 0 100px}
.services__grid{
    display:grid;
    grid-template-columns:1.2fr 1fr;
    gap:20px;
}
.services__grid .s-card:first-child{grid-row:span 2}
.s-card{
    background:#fff;
    border:1px solid rgba(45,43,40,.07);
    border-radius:20px;
    padding:36px 30px;
    transition:border-color .3s,transform .3s;
}
.s-card:hover{border-color:rgba(212,120,60,.18);transform:translateY(-3px)}
.s-card__icon{
    width:46px;height:46px;border-radius:13px;
    background:rgba(212,120,60,.07);
    border:1px solid rgba(212,120,60,.1);
    display:flex;align-items:center;justify-content:center;
    color:#D4783C;
    margin-bottom:18px;
}
.s-card h3{
    font-size:18px;font-weight:700;
    letter-spacing:-.01em;
    margin-bottom:10px;color:#2D2B28;
}
.s-card p{
    font-size:14px;line-height:1.75;
    color:#7A756D;margin-bottom:16px;
}
.s-card__tags{display:flex;gap:6px;flex-wrap:wrap}
.s-card__tags span{
    font-size:11px;font-weight:600;
    padding:5px 12px;border-radius:8px;
    background:rgba(45,43,40,.04);
    border:1px solid rgba(45,43,40,.07);
    color:#5A5650;
}

/* ===== WHY US ===== */
.why{padding:80px 0 100px}
.why__grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;
}
.why-card{
    background:#fff;
    border:1px solid rgba(45,43,40,.07);
    border-radius:18px;
    padding:28px 22px;
    transition:border-color .3s,transform .3s;
}
.why-card:hover{border-color:rgba(212,120,60,.18);transform:translateY(-3px)}
.why-card__num{
    font-size:24px;font-weight:700;
    letter-spacing:-.04em;
    color:rgba(212,120,60,.2);
    margin-bottom:10px;line-height:1;
}
.why-card h3{
    font-size:14px;font-weight:700;color:#2D2B28;
    margin-bottom:8px;
}
.why-card p{
    font-size:13px;line-height:1.65;color:#7A756D;
}

/* ===== CASES ===== */
.cases{padding:80px 0 100px}
.cases__grid{
    display:flex;
    flex-direction:column;
    gap:20px;
}
.case-card{
    background:#fff;
    border:1px solid rgba(45,43,40,.07);
    border-radius:20px;
    padding:32px 36px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:28px;
    align-items:center;
    transition:border-color .3s,transform .3s;
}
.case-card:hover{border-color:rgba(212,120,60,.15);transform:translateY(-3px)}
.case-card__left{}
.case-card__company{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.case-card__logo{
    width:42px;height:42px;border-radius:12px;
    display:flex;align-items:center;justify-content:center;
    flex-shrink:0;
}
.case-card__company h3{font-size:16px;font-weight:700;color:#2D2B28}
.case-card__industry{font-size:12px;color:#7A756D;margin-top:2px;display:block}
.case-card__task{
    font-size:14px;line-height:1.7;
    color:#7A756D;margin-bottom:8px;
}
.case-card__task strong,.case-card__desc strong{color:#5A5650;font-weight:600}
.case-card__desc{
    font-size:14px;line-height:1.7;
    color:#7A756D;
}
.case-card__results{
    display:grid;grid-template-columns:repeat(3,1fr);
    gap:16px;
}
.case-card__metric{
    text-align:center;
    background:rgba(212,120,60,.04);
    border:1px solid rgba(212,120,60,.08);
    border-radius:14px;
    padding:20px 12px;
}
.case-card__metric-value{
    font-size:22px;font-weight:700;color:#D4783C;
    display:block;margin-bottom:4px;
}
.case-card__metric-label{font-size:11px;color:#7A756D;display:block;line-height:1.4}

/* ===== STATS ===== */
.stats{padding:80px 0}
.stats__row{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
}
.stat{
    background:#fff;
    border:1px solid rgba(45,43,40,.07);
    border-radius:18px;
    padding:32px 24px;
    text-align:center;
    transition:border-color .3s,transform .3s;
}
.stat:hover{border-color:rgba(212,120,60,.15);transform:translateY(-2px)}
.stat__num{
    font-size:clamp(28px,3.5vw,38px);
    font-weight:700;letter-spacing:-.03em;
    color:#2D2B28;margin-bottom:4px;
}
.stat__num span{color:#D4783C}
.stat__label{font-size:13px;color:#7A756D;font-weight:600;margin-bottom:8px}
.stat__desc{font-size:12px;color:#9A958E;line-height:1.55}

/* ===== BONUSES ===== */
.bonuses{padding:80px 0 100px}
.bonuses__grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
}
.bonus{
    background:#fff;
    border:1px solid rgba(45,43,40,.07);
    border-radius:16px;
    padding:26px 22px;
    transition:border-color .3s,transform .3s;
}
.bonus:hover{border-color:rgba(212,120,60,.15);transform:translateY(-2px)}
.bonus__icon{
    width:40px;height:40px;border-radius:10px;
    background:rgba(212,120,60,.07);
    border:1px solid rgba(212,120,60,.1);
    display:flex;align-items:center;justify-content:center;
    margin-bottom:14px;
}
.bonus h4{font-size:14px;font-weight:700;color:#2D2B28;margin-bottom:6px}
.bonus p{font-size:13px;line-height:1.65;color:#7A756D}

/* ===== FAQ ===== */
.faq{padding:80px 0 100px}
.faq__list{max-width:720px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
.faq__item{
    background:#fff;
    border:1px solid rgba(45,43,40,.07);
    border-radius:16px;
    overflow:hidden;
    transition:border-color .3s;
}
.faq__item[open]{border-color:rgba(212,120,60,.2)}
.faq__q{
    padding:20px 24px;
    font-size:15px;font-weight:600;color:#2D2B28;
    cursor:pointer;
    list-style:none;
    display:flex;align-items:center;justify-content:space-between;
}
.faq__q::-webkit-details-marker{display:none}
.faq__q::after{
    content:'+';
    font-size:20px;font-weight:300;color:#9A958E;
    transition:transform .3s;flex-shrink:0;margin-left:16px;
}
.faq__item[open] .faq__q::after{transform:rotate(45deg);color:#D4783C}
.faq__a{
    padding:0 24px 20px;
    font-size:14px;line-height:1.75;
    color:#7A756D;
}

/* ===== CTA ===== */
.cta{padding:40px 0 100px}
.cta__box{
    position:relative;overflow:hidden;
    background:linear-gradient(135deg,#2D2B28 0%,#3D3A35 100%);
    border-radius:28px;
    padding:72px 48px;
    text-align:center;
}
.cta__glow{
    position:absolute;top:-80px;left:50%;transform:translateX(-50%);
    width:500px;height:300px;
    background:radial-gradient(ellipse,rgba(212,120,60,.2),transparent 70%);
    pointer-events:none;
}
.cta__content{position:relative;z-index:1}
.cta__content .heading-2{color:#fff}
.cta__content>p{
    font-size:16px;color:rgba(255,255,255,.6);
    max-width:520px;margin:14px auto 28px;
    line-height:1.75;
}
.cta__contacts{
    display:flex;justify-content:center;gap:16px;flex-wrap:wrap;
    margin-bottom:8px;
}
.cta__contact-item{
    display:flex;align-items:center;gap:8px;
    font-size:14px;color:rgba(255,255,255,.5);
    padding:10px 20px;border-radius:12px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.08);
    transition:all .25s;
}
.cta__contact-item:hover{
    background:rgba(255,255,255,.1);
    border-color:rgba(255,255,255,.15);
    color:rgba(255,255,255,.8);
}
.cta__contact-item svg{color:#E8995E;flex-shrink:0}
.cta .btn--primary{
    background:#D4783C;
    box-shadow:0 4px 24px rgba(212,120,60,.3);
}
.cta .btn--primary:hover{background:#C06A30;box-shadow:0 6px 32px rgba(212,120,60,.4)}

/* ===== FOOTER ===== */
.footer{
    padding:72px 0 0;
    border-top:1px solid rgba(45,43,40,.07);
}
.footer__grid{
    display:grid;
    grid-template-columns:1.6fr 1fr 1fr 1fr;
    gap:40px;
    padding-bottom:52px;
}
.footer__brand .logo{margin-bottom:14px}
.footer__desc{font-size:14px;color:#7A756D;line-height:1.75;margin-bottom:12px}
.footer__addr{font-size:14px;color:#7A756D;line-height:1.8}
.footer__addr a{color:#D4783C;font-weight:600;transition:color .2s}
.footer__addr a:hover{color:#C06A30}
.footer__col h4{
    font-size:12px;font-weight:700;color:#5A5650;
    margin-bottom:18px;letter-spacing:.08em;text-transform:uppercase;
}
.footer__col li{margin-bottom:10px}
.footer__col a{font-size:14px;color:#7A756D;transition:color .2s}
.footer__col a:hover{color:#2D2B28}
.footer__bottom{
    display:flex;justify-content:space-between;align-items:center;
    border-top:1px solid rgba(45,43,40,.07);
    padding:22px 0;
}
.footer__bottom p{font-size:12px;color:#9A958E}
.footer__links{display:flex;gap:20px}
.footer__links a{font-size:12px;color:#9A958E;transition:color .2s}
.footer__links a:hover{color:#7A756D}

/* ===== RESPONSIVE ===== */
@media(max-width:1024px){
    .why__grid{grid-template-columns:repeat(2,1fr)}
    .stats__row{grid-template-columns:repeat(2,1fr)}
    .services__grid{grid-template-columns:1fr}
    .services__grid .s-card:first-child{grid-row:auto}
    .case-card{grid-template-columns:1fr}
    .bonuses__grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:768px){
    .container{padding:0 20px}
    .nav__links{
        position:fixed;top:64px;left:0;right:0;
        background:rgba(251,248,243,.97);
        backdrop-filter:blur(20px);
        -webkit-backdrop-filter:blur(20px);
        flex-direction:column;align-items:center;
        padding:28px 0;gap:22px;
        transform:translateY(-120%);transition:transform .35s;
        border-bottom:1px solid rgba(45,43,40,.07);
    }
    .nav__links.open{transform:translateY(0)}
    .nav__burger{display:flex}
    .nav__cta{display:none}
    .hero{padding:110px 0 60px}
    .hero__actions{flex-direction:column;align-items:center}
    .hero__trust-line{flex-direction:column}
    .process__steps{grid-template-columns:1fr}
    .services__grid{grid-template-columns:1fr}
    .why__grid{grid-template-columns:1fr}
    .cases__grid .case-card{grid-template-columns:1fr}
    .case-card__results{grid-template-columns:repeat(3,1fr)}
    .stats__row{grid-template-columns:repeat(2,1fr)}
    .bonuses__grid{grid-template-columns:1fr}
    .cta__box{padding:48px 24px}
    .cta__contacts{flex-direction:column;align-items:center}
    .footer__grid{grid-template-columns:1fr 1fr;gap:28px}
    .footer__bottom{flex-direction:column;gap:12px;text-align:center}
    .footer__links{justify-content:center}
}

@media(max-width:480px){
    .hero__title{font-size:32px}
    .stats__row{grid-template-columns:1fr}
    .case-card__results{grid-template-columns:1fr;gap:10px}
    .footer__grid{grid-template-columns:1fr}
}