/* ==========================================================
   IT-Revisor
   styles.css
========================================================== */

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

html{
    scroll-behavior:smooth;
}

@media (prefers-reduced-motion:reduce){

html{
scroll-behavior:auto;
}

*{
animation:none!important;
transition:none!important;
}

}

body{

margin:0;

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

font-size:18px;

line-height:1.75;

color:#111;

background:#fff;

text-rendering:optimizeLegibility;

-webkit-font-smoothing:antialiased;

}

img,
svg,
object{

display:block;

max-width:100%;

height:auto;

}

a{

color:inherit;

text-decoration:none;

}

button{

font:inherit;

background:none;

border:none;

cursor:pointer;

}

ul{

padding:0;

margin:0;

list-style:none;

}

p,
h1,
h2,
h3{

margin:0;

}

:root{

--bg:#ffffff;

--surface:#fafafa;

--text:#111111;

--text-soft:#666;

--border:#e7e7e7;

--accent:#2146d0;

--accent-hover:#1737ab;

--container:1200px;

--radius:8px;

--shadow:
0 10px 40px rgba(0,0,0,.04);

--section:140px;

--transition:.25s ease;

}

.container{

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

margin-inline:auto;

}

.narrow{

max-width:820px;

}

.skip-link{

position:absolute;

left:-9999px;

top:0;

padding:12px 20px;

background:#000;

color:#fff;

z-index:100;

}

.skip-link:focus{

left:20px;

top:20px;

}

.header{

position:sticky;

top:0;

z-index:1000;

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

backdrop-filter:blur(14px);

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

}

.header .container{

height:82px;

display:flex;

align-items:center;

justify-content:space-between;

gap:32px;

}

.brand{

display:flex;

align-items:center;

gap:14px;

}

.brand img{

width:42px;

height:42px;

}

.brand-title{

display:block;

font-size:18px;

font-weight:700;

letter-spacing:.02em;

}

.brand-subtitle{

display:block;

margin-top:2px;

font-size:13px;

color:var(--text-soft);

}

.nav{

display:flex;

align-items:center;

gap:40px;

margin-left:auto;

}

.nav a{

position:relative;

font-size:15px;

font-weight:500;

color:#333;

transition:var(--transition);

}

.nav a:hover{

color:var(--accent);

}

.nav a::after{

content:"";

position:absolute;

left:0;

bottom:-6px;

width:0;

height:2px;

background:var(--accent);

transition:var(--transition);

}

.nav a:hover::after{

width:100%;

}

.menu-button{

display:none;

font-size:26px;

padding:4px;

}

main{

overflow:hidden;

}

.section{

padding:var(--section) 0;

}

.section+.section{

border-top:1px solid #f1f1f1;

}

.section-label{

display:inline-block;

margin-bottom:22px;

font-size:13px;

font-weight:700;

letter-spacing:.12em;

text-transform:uppercase;

color:var(--accent);

}

h1{

max-width:12ch;

font-size:64px;

line-height:1.05;

font-weight:700;

letter-spacing:-.04em;

margin-bottom:36px;

}

h2{

max-width:18ch;

font-size:42px;

line-height:1.15;

letter-spacing:-.03em;

margin-bottom:28px;

}

h3{

font-size:24px;

line-height:1.3;

margin-bottom:14px;

font-weight:600;

}

p{

max-width:72ch;

color:#444;

}

.hero{

padding-top:120px;

padding-bottom:140px;

}

.hero-grid{

display:grid;

grid-template-columns:
1.1fr
0.9fr;

align-items:center;

gap:90px;

}

.eyebrow{

font-size:13px;

font-weight:700;

letter-spacing:.18em;

text-transform:uppercase;

color:var(--accent);

margin-bottom:24px;

}

.hero-photo {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 12px;
  overflow: hidden; /* Обеспечивает срез углов самого фото по радиусу контейнера */
}

.hero-description{

margin-top:36px;

font-size:20px;

color:#555;

}

.hero-actions{

display:flex;

flex-wrap:wrap;

gap:16px;

margin-top:48px;

}

.button{

display:inline-flex;

align-items:center;

justify-content:center;

height:54px;

padding:0 28px;

border-radius:8px;

font-weight:600;

transition:var(--transition);

}

.button-primary{

background:var(--accent);

color:#fff;

}

.button-primary:hover{

background:var(--accent-hover);

}

.button-secondary{

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

background:#fff;

}

.button-secondary:hover{

border-color:#aaa;

}

.hero-diagram{

display:flex;

justify-content:center;

align-items:center;

padding:40px;

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

border-radius:12px;

background:linear-gradient(
180deg,
#fff,
#fbfbfb
);

}

.diagram{

margin-top:64px;

padding:48px;

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

border-radius:12px;

background:#fff;

}

.section-description{

margin-bottom:52px;

}

.cards{

display:grid;

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

gap:24px;

margin-top:56px;

}

.card{

padding:32px;

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

border-radius:10px;

background:#fff;

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

}

.card:hover{

transform:translateY(-4px);

border-color:#cfd5e8;

box-shadow:var(--shadow);

}

.card p{

font-size:16px;

color:#666;

}

.deliverables{

display:grid;

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

gap:18px 40px;

margin-top:48px;

}

.deliverables li{

position:relative;

padding-left:22px;

font-size:17px;

color:#333;

}

.deliverables li::before{

content:"";

position:absolute;

left:0;

top:12px;

width:8px;

height:8px;

border-radius:50%;

background:var(--accent);

}

.contact-section{

text-align:left;

}

.contact-actions{

margin-top:42px;

}

.contact-info{

display:grid;

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

gap:32px;

margin-top:56px;

padding-top:40px;

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

}

.contact-info span{

display:block;

margin-bottom:10px;

font-size:13px;

font-weight:700;

text-transform:uppercase;

letter-spacing:.08em;

color:#666;

}

.contact-info a{

color:var(--accent);

}

.footer{

margin-top:120px;

padding:48px 0;

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

}

.footer-grid{

display:grid;

grid-template-columns:
1fr
auto;

gap:40px;

align-items:start;

}

.footer-brand{

display:flex;

align-items:center;

gap:16px;

}

.footer-brand strong{

display:block;

font-size:18px;

}

.footer-brand p{

margin-top:4px;

font-size:15px;

color:#666;

}

.footer-links{

display:flex;

flex-direction:column;

gap:12px;

align-items:flex-end;

}

.footer-links a{

color:var(--accent);

}

.copyright{

grid-column:1/-1;

margin-top:32px;

padding-top:24px;

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

font-size:15px;

color:#777;

}

.fade{

opacity:0;

transform:translateY(24px);

transition:
opacity .6s ease,
transform .6s ease;

}

.fade.visible{

opacity:1;

transform:none;

}

:focus-visible{

outline:2px solid var(--accent);

outline-offset:3px;

}

@media (max-width:1100px){

.hero-grid{

grid-template-columns:1fr;

gap:60px;

}

.cards{

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

}

}

@media (max-width:760px){

.header .container{

height:72px;

}

.nav{

display:none;

}

.menu-button{

display:block;

margin-left:auto;

}

.section{

padding:88px 0;

}

.container{

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

}

h1{

font-size:42px;

}

h2{

font-size:32px;

}

.hero{

padding-top:80px;

}

.hero-description{

font-size:18px;

}

.cards{

grid-template-columns:1fr;

}

.deliverables{

grid-template-columns:1fr;

}

.contact-info{

grid-template-columns:1fr;

}

.footer-grid{

grid-template-columns:1fr;

}

.footer-links{

align-items:flex-start;

}

.diagram{

padding:24px;

}

.hero-diagram{

padding:24px;

}

}

@media (max-width:420px){

.button{

width:100%;

}

.hero-actions{

flex-direction:column;

}

}