/* Styles to provide hero layout similar to martynov.tech but keeping original Robocity colors */
:root {
  --brand-main: #ED6B10; /* original orange */
  --brand-light: #FCEDE0; /* light orange background */
  --brand-dark: #c75a0f; /* darker accent */
  --menu-bg: var(--brand-main);
  --menu-accent: var(--brand-main);
  --menu-ink: #fff;
}

.hero-section {
  background: linear-gradient(135deg, var(--brand-main), var(--brand-dark));
  color: #fff;
  padding: 64px 32px 0;
  border-radius: 24px;
  overflow: hidden;
  margin: 32px auto;
  max-width: 1134px;
}
.hero-section .hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.hero-section .hero-text {
  max-width: 600px;
  padding-bottom: 16px;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.hero-section .hero-button {
  background: #fff !important;
  color: var(--brand-main) !important;
  border-radius: 40px !important;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: center;
}
.hero-section .hero-button:hover {
  background: var(--brand-light) !important;
  color: #000 !important;
}
.hero-section .hero-img-container img {
  max-width: 100%;
  border-radius: 12px;
}
.hero-section .hero-logos {
  display: flex;
  align-items: center;
  gap: 16px;
}

.hero-section .hero-logos img {
  height: 23px;
}
.hero-section .hero-image {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  align-self: flex-end;
}
.hero-section h1 {
  line-height: 1.2;
}

@media (max-width: 600px) {
  .hero-section h1 {
    font-size: 32px !important;
    text-align: center;
    overflow-wrap: anywhere;
  }
}
.mt-16 {
  margin-top: 16px;
}
.cases-notification {
  max-width: 1134px;
  margin: 0 auto 11px;
  padding: 16px;
  background: var(--brand-light);
  border-left: 4px solid var(--brand-main);
  border-radius: 8px;
  color: #000;
  font-size: 1rem;
}
@media (min-width: 992px) {
  .hero-section .hero-content { flex-direction: row; text-align: left; }
  .hero-section .hero-text, .hero-section .hero-image { flex: 1; }
  .hero-section .hero-text { padding-right: 32px; }
  .hero-section .hero-button { align-self: flex-start; }
}

/* Menu styles adapted from martynov.tech */
.w3-top{z-index:1000;}
.ozon-header{background:var(--menu-bg)!important;color:var(--menu-ink)!important;border-bottom:2px solid var(--brand-dark);}
.ozon-menu{display:flex;align-items:center;gap:8px;height:64px;padding:0 16px;box-sizing:border-box;}
.ozon-logo{font-weight:700;font-size:24px;line-height:1;color:var(--menu-ink)!important;text-decoration:none;padding:8px 16px;border-radius:12px;white-space:nowrap;}
.ozon-menu__item{font-size:16px;font-weight:600;color:var(--menu-ink)!important;text-decoration:none;padding:8px 16px;line-height:1;display:inline-flex;align-items:center;gap:8px;transition:background .18s,color .18s;}
.ozon-menu__item:hover{background:#fff!important;color:var(--menu-accent)!important;border-radius:20px;}
.ozon-catalog.w3-button{background:#fff!important;color:var(--menu-accent)!important;border-radius:20px;padding:8px 16px;font-size:16px;font-weight:600;box-shadow:none;border:none;display:inline-flex;align-items:center;gap:8px;}
.ozon-catalog.w3-button:hover{background:var(--brand-light)!important;color:#000!important;}
.w3-top .w3-bar .w3-button{background:transparent!important;color:var(--menu-ink)!important;transition:background .18s,color .18s;}
.w3-top .w3-bar .w3-button:hover{background:#fff!important;color:var(--menu-accent)!important;border-radius:20px;}
#navDemo{border-top:1px solid rgba(255,255,255,.08);}
#navDemo .w3-button{color:#111!important;background:#fff!important;border-radius:0!important;text-align:left;padding:14px 18px;font-size:16px;border-bottom:1px solid #f2f2f2;}
#navDemo .w3-button:hover{background:#f7f9fa!important;color:#000!important;}
@media (max-width:992px){.ozon-menu .ozon-menu__item:not(.ozon-catalog){display:inline-flex;}}

/* Case cards styled like martynov.tech */
.card-grid{display:flex;flex-wrap:wrap;gap:18px 18px;margin-top:18px}
.itemBlock{flex:0 0 calc(50% - 9px);max-width:calc(50% - 9px);box-sizing:border-box}
@media (max-width:900px){.itemBlock{flex:0 0 100%;max-width:100%}.card-grid{gap:12px 0}}

.case-card{display:flex;align-items:flex-start;background:var(--brand-light);border-radius:14px;box-shadow:0 1.5px 7px rgba(0,0,0,.06);padding:22px 20px 18px;min-height:170px;gap:20px;transition:box-shadow .22s,transform .18s;cursor:pointer}
.case-card:hover{box-shadow:0 8px 24px rgba(0,0,0,.10);transform:translateY(-2px) scale(1.012)}
.case-icon .fa{font-size:40px;color:var(--brand-main)}
.case-title{font-size:1.15rem;font-weight:700;margin-bottom:8px;color:#111;letter-spacing:.02em}
.case-desc{font-size:1rem;color:#474747;margin-bottom:16px;line-height:1.4}
.case-tags{display:flex;gap:8px;flex-wrap:wrap}
.case-tags span{border-radius:2em;padding:3px 14px;font-size:.89rem;font-weight:500}
.case-tags span:nth-child(odd){background:var(--brand-main);color:#fff}
.case-tags span:nth-child(even){background:var(--brand-dark);color:#fff}

.case-actions{display:flex;align-items:center;gap:8px;margin-top:8px}
.case-actions .edit-button{background:transparent}
.case-actions .edit-button,.case-actions .case-status{min-width:100px;text-align:center}
.case-status{cursor:default;padding:4px 8px}

/* Modal styles */
.case-modal{border-radius:16px;overflow:hidden}
.case-modal__header{padding:16px 24px}
.case-modal__body{padding:24px 32px;width:100%;border-collapse:collapse}
.case-modal__body th,.case-modal__body td{padding:12px 16px;font-size:1rem;line-height:1.4;text-align:left}
.case-modal__body th{font-weight:500;white-space:nowrap;padding-right:16px}
.case-modal__body th i{color:var(--brand-main);margin-right:8px}
.case-modal__body tr+tr{border-top:1px solid #eee}
.case-modal__body input,.case-modal__body textarea{border-radius:8px}
.case-modal__footer{padding:16px 24px;border-top:1px solid #eee;text-align:right}