/* =====================
   BASE
===================== */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  background: #f5f5f3;
  color: #333;

background-image: url("img/bg.jpg");
  background-repeat: no-repeat;
   background-position: left top;
}

/* =====================
   LAYOUT
===================== */
.layout {
 
  display: grid;
  grid-template-columns: 1fr 1fr;
    align-items: start;
  padding: 0px 64px;
  gap:80px;
}

/* =====================
   LEFT COLUMN
===================== */


.left {
  display: flex;
  flex-direction: column;
  align-items: flex-end;   
  text-align: right;
}


.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 48px;
}



.manifesto {
  max-width: 770px;
  font-family: 'Montserrat', sans-serif;
  font-size: 60px;
  font-weight: 500;
  color: #333;
  line-height: 1.15;
}
.sub-manifesto {
  max-width: 600px;
  font-family: 'Montserrat', sans-serif;
  font-size: 30px;
  font-weight: 400;
  color: #999;
  line-height: 1.15;
}

/* =====================
   RIGHT COLUMN
===================== */
.right {
  display: flex;
  flex-direction: column;
  align-items: flex-start; 
}

.form-card {
  width: 100%;
  max-width: 520px;
  background: #ffffff;
  border-radius: 6px;
  padding: 32px;
  box-shadow:
    0 10px 25px rgba(0, 0, 0, 0.15);
}

/* placeholder only */
.form-placeholder {
  min-height: 600px;
  outline: 0px dashed green;
}

/* =====================
   EMAIL NOTE
===================== */
.email-note {
  margin-top: 20px;
  padding:0px 0px 0px 40px;
  font-size: 18px;
  color: #666;
  text-align: left;
}

.email-note a {
  color: #000;

}

.email-note a:hover {
  text-decoration: underline;
}

/* =====================
   RESPONSIVE
===================== */
@media (max-width: 900px) {
  .layout {
    grid-template-columns: 1fr;
    padding: 48px 24px;
    gap: 48px;
  }

  .manifesto {
    font-size: 22px;
  }

  .form-card {
    padding: 24px;
  }
}


/* =====================
   TOP 
===================== */

.topbar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 50px 64px;
}

.logo-wrapper {
  grid-column: 1;
  justify-self: end;
   transform: translateX(-240px); 
}


/* debug */

.topbar, 
.left,
.right {
  outline: 0px dashed black;
}

.topbar { outline: 0px solid red; }
.layout { outline: 0px solid blue; }

.left { outline: 0px solid red; }
.manifesto { outline:0px solid blue; }


/* Layer visibility control */
#layer-b-iframe {
  display: none;
}

/* decor */
.form-card {
  width: 100%;
  max-width: 520px;

    position: relative;
  z-index: 2;

  /* фон: белая заливка + пунктир + картинка */
  background-color: #ffffff;

  background-image:
    repeating-linear-gradient(
      to right,
      #ff8a00 0px,
      #ff8a00 40px,
      transparent 40px,
      transparent 80px
    ),
    url("img/robot2.jpg");

  background-repeat:
    no-repeat,
    no-repeat;

  background-size:
    calc(100% - 64px) 6px,
    auto;

  background-position:
    32px 0px,
    center bottom;

  border-radius: 6px;
  padding: 32px;

  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

  /* темная полоса*/
.black-strip{
  
 padding-bottom: 80px; /* формирует место под нижние колонки */
  height: auto;

    position: absolute;
  left: 50%;
  transform: translateX(-50%);
 width: 100%;
left: 0;
transform: none;
  height: 70px;
  background: #222;
  bottom: -120px; /* теперь двигается от низа белой плашки */
  z-index: 1;
}

  /* колонки под темной полосой на темном фоне*/

.layout-dark{
  background: #222;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 0px 64px;
  gap: 80px;
    position: relative;
  z-index: 2;
  margin-top: 0px; /* = высоте black-strip */
}

.dark-left{
 display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  color:#d6d5d5;
  width: 100%;
  padding:100px 0px 50px 0px;
 
}
.dark-left p { 
  max-width:600px;
  font-family:'Montserrat', sans-serif;
  font-size:25px;
  font-weight:400;

  line-height:1.15;
 margin:0;
  padding:0;
  color:#666;
}


.dark-left h3{
 
  font-family:'Montserrat', sans-serif;
  font-size:40px !important;
  font-weight:500 !important;
  line-height:1.15 !important;
   margin:0;
  padding:0px 0px 20px 0px;


}
.dark-right{
 
   padding: 140px 0px;
}
.dark-email{
  font-family:'Montserrat', sans-serif;
  font-size:32px;
  font-weight:200;
  color:#666;
  text-decoration:none;
  line-height:1.2;

   padding:18px 36px;
  border:2px dashed #666;   /* сплошная рамка */
  border-radius:4px;
  
  margin:40px 0px 0px 80px;
}

.dark-email:hover{
  text-decoration:underline;
}