/* =========================================================
   FONTS
   ========================================================= */

@font-face {
  font-family: "Avenir Next Cyr";
  src: url("../assets/fonts/AvenirNextCyr-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* =========================================================
   GLOBAL THEME VARIABLES
   ========================================================= */

:root{
  --bg:#0b0f14;
  --text:#e7edf5;
  --muted:#97a6b8;

  --border:rgba(200,200,255,.32);
  --border-hover:rgba(124,243,255,.64);

  --panel:rgba(255,255,255,.03);
  --panel-2:rgba(0,0,0,.14);

  --accent:#7cf3ff;
  --accent-soft:rgba(124,243,255,.10);

  --radius:18px;

  --ctl-h:40px;
  --ctl-pad-x:14px;
}

/* =========================================================
   BASE
   ========================================================= */

*{box-sizing:border-box}

html,body{height:100%}

html{scroll-behavior:smooth}

body{
  margin:0;
  font:15px/1.55 "Avenir Next Cyr", system-ui, sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(124,243,255,.16), transparent 55%),
    radial-gradient(900px 500px at 85% 0%, rgba(255,77,125,.12), transparent 55%),
    var(--bg);
  overflow-x:hidden;
}

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

img,video{max-width:100%}

h1,h2,h3,p{margin:0}

/* =========================================================
   LAYOUT
   ========================================================= */

.wrap{
  max-width:1100px;
  margin:0 auto;
  padding:20px;
}

.section{
  padding:84px 0;
}

.section-border{
  border-top:1px solid rgba(200,200,255,.12);
  border-bottom:1px solid rgba(200,200,255,.12);
  background:rgba(255,255,255,.015);
}

.eyebrow{
  font-size:12px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:16px;
}

.lead{
  margin-top:22px;
  max-width:760px;
  color:var(--muted);
  font-size:20px;
  line-height:1.7;
}

h1{
  font-size:clamp(42px, 6vw, 72px);
  line-height:1.02;
  letter-spacing:-.04em;
  max-width:980px;
}

h2{
  font-size:clamp(30px, 4vw, 48px);
  line-height:1.08;
  letter-spacing:-.03em;
  max-width:820px;
}

h3{
  font-size:24px;
  line-height:1.2;
}

/* =========================================================
   UI ELEMENTS
   ========================================================= */

.pill{
  height:var(--ctl-h);
  padding:0 var(--ctl-pad-x);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  font-size:12px;
  border-radius:999px;
  border:1px solid var(--border);
  color:var(--muted);
  background:rgba(255,255,255,.02);
}

.btn,
.nav a{
  height:var(--ctl-h);
  padding:0 var(--ctl-pad-x);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  border:1px solid var(--border);
  background:rgba(255,255,255,.02);
  border-radius:12px;
  transition:.15s;
  color:var(--text);
}

.btn:hover,
.nav a:hover{
  transform:translateY(-1px);
  border-color:var(--border-hover);
  background:var(--accent-soft);
}

.btn-primary{
  background:var(--accent-soft);
  border-color:rgba(124,243,255,.42);
}

/* =========================================================
   CARDS
   ========================================================= */

.card{
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.03),
      rgba(255,255,255,.01)
    );
  overflow:hidden;
  transition:.15s;
  display:block;
}

.card:hover{
  transform:translateY(-2px);
  border-color:var(--border-hover);
}

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

.top{
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.03),
      transparent 65%
    );
  padding:18px;
}

.title{
  font-size:24px;
  line-height:1.12;
  margin:0;
}

.subtitle{
  margin:10px 0 0 0;
  color:var(--muted);
  max-width:64ch;
}

.topbar{
  position:sticky;
  top:0;
  z-index:30;
  backdrop-filter:blur(14px);
  background:rgba(11,15,20,.76);
  border-bottom:1px solid rgba(200,200,255,.12);
}

.topbar-inner{
  min-height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding-top:0;
  padding-bottom:0;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:18px;
  line-height:1;
  letter-spacing:-.02em;
  font-weight:600;
}

.logo{
  height:40px;
  width:auto;
  display:block;
}

.nav{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

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

.hero{
  min-height:calc(100vh - 72px);
  display:flex;
  align-items:center;
  padding:44px 0 56px;
}

.hero-grid{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:24px;
  align-items:end;
}

.hero-side{
  display:grid;
  gap:14px;
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:30px;
}

.info-card{
  padding:24px;
  min-height:190px;
}

.card-label{
  font-size:13px;
  color:var(--muted);
  margin-bottom:10px;
}

/* =========================================================
   GRID
   ========================================================= */

.grid{
  margin-top:16px;
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:14px;
}

.grid-2{
  margin-top:18px;
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:14px;
}

.service-card{
  grid-column:span 6;
  padding:28px;
}

.service-card p{
  margin-top:16px;
  font-size:15px;
  line-height:1.8;
}

.split{
  display:grid;
  grid-template-columns:.95fr 1.05fr;
  gap:30px;
  align-items:start;
}

.list{
  display:grid;
  gap:12px;
}

.list-row{
  border:1px solid var(--border);
  border-radius:16px;
  background:rgba(255,255,255,.02);
  padding:18px 20px;
  color:var(--text);
}

.steps{
  margin-top:18px;
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:14px;
}

.step{
  grid-column:span 3;
  padding:24px;
}

.step-number{
  font-size:14px;
  color:var(--muted);
  margin-bottom:14px;
}

.step p{
  margin-top:14px;
  font-size:15px;
  line-height:1.8;
}

/* =========================================================
   PROJECT / CATEGORY CARDS
   ========================================================= */

.projects-grid{
  margin-top:18px;
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:14px;
}

.project-card{
  grid-column:span 6;
  min-height:250px;
  position:relative;
  padding:22px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)),
    radial-gradient(500px 180px at 100% 0%, rgba(124,243,255,.10), transparent 60%);
}

.project-card h3{
  font-size:24px;
}

.project-card p{
  margin-top:12px;
  font-size:14px;
  line-height:1.75;
  color:var(--muted);
}

.project-card::after{
  content:"Открыть проект";
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:max-content;
  height:34px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid rgba(124,243,255,.28);
  background:rgba(124,243,255,.06);
  color:var(--text);
  font-size:12px;
  line-height:1;
  margin-top:18px;
}

.project-card:hover::after{
  border-color:var(--border-hover);
  background:var(--accent-soft);
}

.project-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:16px;
}

.project-meta span{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:0 10px;
  border:1px solid rgba(200,200,255,.18);
  border-radius:999px;
  background:rgba(255,255,255,.02);
  color:var(--muted);
  font-size:12px;
  line-height:1;
}

/* =========================================================
   MEDIA GRID (галереи проектов)
   ========================================================= */

.media{
  margin-top:16px;
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:10px;
}

figure{
  margin:0;
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
  background:#05080c;
}

figure img,
figure video{
  width:100%;
  height:auto;
  display:block;
}

figure video{
  object-fit:contain;
}

.span4{grid-column:span 4}
.span6{grid-column:span 6}
.span12{grid-column:span 12}

/* =========================================================
   CONTACT + FOOTER
   ========================================================= */

.contact-box{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:28px;
  align-items:start;
  border:1px solid var(--border);
  border-radius:24px;
  padding:32px;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  box-shadow:0 20px 60px rgba(0,0,0,.24);
}

.contact-actions{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:12px;
}

.contact-mail,
.contact-link{
  min-width:280px;
  text-align:center;
}

.contact-note,
.company-text{
  color:var(--muted);
}

.contact-note{
  font-size:14px;
  text-align:right;
}

.footer-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
  align-items:start;
}

/* =========================================================
   PORTRAIT + MODAL
   ========================================================= */

.portrait{
  display:block;
  margin-top:12px;
  border-radius:16px;
  overflow:hidden;
  border:1px solid var(--border);
  transition:.15s;
}

.portrait:hover{
  border-color:var(--border-hover);
  transform:translateY(-1px);
}

.portrait img{
  display:block;
  width:100%;
  height:auto;
}

.modal{
  position:fixed;
  inset:0;
  display:none;
  z-index:9999;
}

.modal.isOpen{display:block;}

.modalBackdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.75);
}

.modalBody{
  position:relative;
  max-width:min(92vw, 900px);
  max-height:88vh;
  margin:6vh auto 0 auto;
  padding:14px;
  border-radius:18px;
  border:1px solid var(--border);
  background:rgba(10,14,20,.95);
}

.modalImg{
  width:100%;
  height:auto;
  max-height:calc(88vh - 48px);
  object-fit:contain;
  border-radius:14px;
}

.modalClose{
  position:absolute;
  top:10px;
  right:10px;
  width:40px;
  height:40px;
  padding:0;
  border-radius:12px;
  font-size:22px;
}

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

@media (max-width:1080px){

  .hero-grid,
  .split,
  .contact-box,
  .footer-grid{
    grid-template-columns:1fr;
  }

  .step{
    grid-column:span 6;
  }

  .contact-actions{
    align-items:flex-start;
  }

  .contact-note{
    text-align:left;
  }
}

@media (max-width:768px){

  .wrap{padding:16px;}

  .topbar-inner{
    padding:14px 0;
    align-items:flex-start;
    flex-direction:column;
  }

  .hero{
    min-height:auto;
    padding-top:34px;
  }

  .section{
    padding:64px 0;
  }

  .grid > .card{
    grid-column:1 / -1 !important;
  }

  .service-card,
  .project-card,
  .step{
    grid-column:1 / -1;
  }

  .media{
    grid-template-columns:1fr;
  }

  .span4,
  .span6,
  .span12{
    grid-column:1 / -1;
  }

  .contact-mail,
  .contact-link{
    min-width:100%;
  }

  .info-card,
  .service-card,
  .project-card,
  .step,
  .contact-box{
    padding:22px;
  }

  .lead{
    font-size:18px;
  }

  .title{
    font-size:20px;
  }

  .modalBody{
    max-width:min(72vw, 420px);
    max-height:62vh;
    margin:10vh auto 0 auto;
    padding:10px;
  }

  .modalImg{
    max-height:calc(62vh - 44px);
  }
}