:root{
  --bg: #f9fafb;
  --surface: #ffffff;
  --text: #0f172a;
  --muted: #475569;
  --line: #e5e7eb;
  --accent-100: #b1e3ff;
  --accent-200: #7bd0ff;
  --accent-300: #54c2ff;
  --accent: #0ea5e9;
  --radius: 20px;
  --shadow: 0 10px 30px rgba(2, 132, 199, .12);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
}

/* background ornaments */
.bg-ornament{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:-1; opacity:.55; pointer-events:none;
}

/* main{max-width:1100px; margin-inline:auto; padding:40px 20px} */
.container{
    max-width:1100px; margin-inline:auto; padding:0 20px;
}
/* Sections */
.section{margin:64px 0}
.section__title{
  font-size:clamp(24px, 2.5vw, 34px);
  margin:0 0 22px;
  letter-spacing:-0.02em;
}

/* Intro */
.intro__badge{
  display:inline-block; padding:8px 14px;
  background:linear-gradient(90deg, var(--accent-200), var(--accent-300));
  color:#053b51; border-radius:999px; font-weight:700; box-shadow:var(--shadow);
}
.intro__title{
  font-size:clamp(34px, 5vw, 56px);
  line-height:1.1; margin:18px 0 12px; letter-spacing:-.02em;
  text-transform: uppercase;
  font-weight: 900;
}
.intro__lead{max-width:780px; color:var(--muted); font-size:clamp(16px, 1.4vw, 18px)}
.intro__cta{margin:20px 0 12px; display:flex; gap:12px; flex-wrap:wrap}
.btn{
  background:var(--accent);
  color:#fff; text-decoration:none; padding:12px 18px; border-radius:12px; font-weight:700;
  display:inline-flex; align-items:center; justify-content:center; box-shadow:var(--shadow);
  transition:transform .15s ease, box-shadow .2s ease;
}
.btn:hover{transform:translateY(-2px); box-shadow:0 14px 38px rgba(2,132,199,.18)}
.btn--ghost{background:#eaf6ff; color:#0369a1}
.btn--tiny{padding:8px 12px; font-weight:600; border-radius:10px}

.chips{display:flex; gap:8px; padding:0; margin:16px 0 0; list-style:none; flex-wrap:wrap}
.chips li{
  padding:6px 10px; background:#fff; border:1px solid var(--line);
  border-radius:999px; font-size:14px; color:#0b3c4f;
}

/* Cards / Grid */
.grid{
  display:grid; gap:18px;
  grid-template-columns: repeat(12, 1fr);
}
.cards .card, .articles__grid .article{
  grid-column: span 6;
}
@media (max-width: 820px){
  .cards .card, .articles__grid .article{grid-column: span 12}
}

.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px; box-shadow: var(--shadow); position:relative; overflow:hidden;
}
.card__icon{
  width:44px; height:44px; color:#0284c7; opacity:.9; margin-bottom:8px;
}
.card h3{margin:6px 0 6px; font-size:20px}
.card p{margin:0; color:var(--muted)}

.card--project{display:flex; 
    flex-direction: column;
}

/* Articles */
.articles__grid{
  display:grid; gap:18px; grid-template-columns: repeat(12, 1fr);
}
.article{
  display:block; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:20px; text-decoration:none; color:inherit;
  box-shadow:var(--shadow); position:relative; overflow:hidden;
}
.article__tag{
  position:absolute; top:12px; right:12px;
  background:#e6f4ff; color:#0369a1; font-weight:700; font-size:12px;
  padding:6px 10px; border-radius:999px;
}
.article h3{margin:4px 0 6px; font-size:20px}
.article p{margin:0 0 12px; color:var(--muted)}
.article__meta{font-size:12px; color:#64748b}

/* Timeline */
.timeline__list{
  list-style:none; padding:0; margin:0; position:relative;
}
.timeline__list::before{
  content:""; position:absolute; left:14px; top:0; bottom:0; width:2px; background:linear-gradient(#dbeafe,#bae6fd);
}
.timeline__list li{
  display:grid; grid-template-columns:40px 16px 1fr; align-items:flex-start; gap:12px;
  padding:14px 0;
}
.timeline .time{font-weight:800; color:#075985}
.timeline .dot{
  width:14px; height:14px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 0 6px rgba(14,165,233,.15);
}
.timeline .content{background:#fff; border:1px solid var(--line); border-radius:14px; padding:12px 14px}




/* Reveal animation */
.reveal{opacity:0; transform:translateY(10px); will-change:transform, opacity}
.reveal.visible{opacity:1; transform:none; transition:opacity .6s ease, transform .6s ease}

/* Accessibility */
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none}
  .btn{transition:none}
}


/* Case Studies */
.card--case .case__head{margin-bottom:10px}
.kpis{list-style:none; display:flex; flex-wrap:wrap; gap:12px; padding:0; margin:6px 0 0}
.kpis li{font-size:14px; font-weight:700; color:#0369a1}
.spark{width:100%; height:40px; color:#0ea5e9; margin-top:6px; opacity:.85}

/* Speaking */
.speaking .card h3{font-size:18px; margin-bottom:6px}





.header{

}
.headerWrapper{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
}

.nav{

}
.ham{
    display: none;
}

.nav ul{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    padding-left: 0;
    margin: 0;
}

.nav li{
    list-style: none;
}

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

.stopScroll{
    overflow: hidden;
}
.logo{
    position: relative;
    z-index: 1000;
    font-size: 20px;
    font-weight: 900;
    text-decoration: none;
    color: #111;
}
@media screen and (max-width: 800px) {
    .nav{
        position: fixed;
        inset: 0;
        background-color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100vw;
        height: 100vh;
        z-index: 999;
        transform: translateX(100%);
        -webkit-transform: translateX(100%);
        -moz-transform: translateX(100%);
        -ms-transform: translateX(100%);
        -o-transform: translateX(100%);
        transition: .3s all cubic-bezier(0.23, 1, 0.320, 1);
        -webkit-transition: .3s all cubic-bezier(0.23, 1, 0.320, 1);
        -moz-transition: .3s all cubic-bezier(0.23, 1, 0.320, 1);
        -ms-transition: .3s all cubic-bezier(0.23, 1, 0.320, 1);
        -o-transition: .3s all cubic-bezier(0.23, 1, 0.320, 1);
}
    .nav.active{
        transform: translateX(0);
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
}

    .nav ul{
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .ham {
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: transform 400ms;
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        user-select: none;
        display: flex;
        z-index: 1000;
}
.hamRotate.active {
  transform: rotate(45deg);
}
.hamRotate180.active {
  transform: rotate(180deg);
}
.line {
  fill:none;
  transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
  stroke:#111;
  stroke-width:5.5;
  stroke-linecap:round;
}
.ham7 .top {
  stroke-dasharray: 40 82;
}
.ham7 .middle {
  stroke-dasharray: 40 111;
}
.ham7 .bottom {
  stroke-dasharray: 40 161;
}
.ham7.active .top {
  stroke-dasharray: 17 82;
  stroke-dashoffset: -62px;
}
.ham7.active .middle {
  stroke-dashoffset: 23px;
}
.ham7.active .bottom {
  stroke-dashoffset: -83px;
}
.ham8 .top {
  stroke-dasharray: 40 160;
}
}


/*   НАСТРОЙКА SCROLL-BAR   */
::-webkit-scrollbar {
    width: 0.5em;
}

::-webkit-scrollbar-track {
    background-color: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: #111;
}


::-webkit-scrollbar-thumb:active {
    background-color: #111;
}
.footer{
    
     border-top:1px solid var(--line); 
     padding:24px 0;
    }

.footerWrapper{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
}
.f-social{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    i{
        font-size: 24px;
        color: #111;
    }
}

.intoLinks {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        text-align: center;
        
        span {
          width: 8px;
          height: 8px;
          background-color: #111;
          border-radius: 50%;
        }
        a {
          transition: 0.3s all linear;
          transform-origin: left;
          color: #111;
          text-decoration: none;
        }
        a:hover {
          text-decoration: underline;
        }
      }
      @media screen and (max-width: 750px) {
        .intoLinks {
          flex-direction: column;
          span {
            display: none;
          }
        }
      }

.reserved{
    text-align: center;
    opacity: .7;
    margin: 0;
}

@media screen and (max-width: 800px) {
    #principles .grid{
        display: flex;
        flex-direction: column;
    }
}