/* ---- ShakRiz Company brand additions ---- */
:root{
  --brand-gold: #d4af37;
  --brand-bg: #0b0b0e;
}
body.brand-dark {
  background: radial-gradient(1200px 800px at 20% 0%, #141418 0%, #0b0b0e 60%, #050507 100%);
  color: #eaeaf2;
}
.header__brand {
  display:flex; align-items:center; gap:.6rem; font-weight:700; letter-spacing:.5px;
}
.header__brand img {height:40px; width:auto; display:block;}
.lang-switch{
  display:flex; gap:.25rem; align-items:center;
}
.lang-switch a{
  padding:.35rem .5rem; border-radius:8px; text-decoration:none; font-size:.9rem;
  border:1px solid rgba(255,255,255,.15);
}
.section--portfolio .cards{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap:16px;
}
.card{
  background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  border-radius:16px; padding:14px; backdrop-filter: blur(6px);
}
.card img{ width:100%; height:160px; object-fit:cover; border-radius:10px; }
.card .tag{font-size:.75rem; opacity:.8}
.card h3{margin:.4rem 0 .25rem}
.footer{opacity:.8; font-size:.9rem; padding:24px 0}

/* ---- Header/Nav layout ---- */
.container { max-width: 1120px; margin: 0 auto; padding: 0 16px;}
.site-header { position:sticky; top:0; z-index:10; backdrop-filter: blur(8px);
  background: linear-gradient(180deg, rgba(10,10,12,.85), rgba(10,10,12,.55)); border-bottom:1px solid rgba(255,255,255,.06);}
.header__row { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:72px; }
.header__brand .brand-text { text-decoration:none; font-weight:700; letter-spacing:.5px; color:inherit; }
.site-nav { display:flex; gap:.9rem; flex-wrap:wrap; align-items:center; }
.site-nav a { text-decoration:none; padding:.45rem .6rem; border-radius:8px; border:1px solid transparent; }
.site-nav a:hover { border-color: rgba(255,255,255,.18); }
@media (max-width: 720px){
  .site-nav { display:none; } /* simple collapse for mobile */
}

.lang-switch a.active{ border-color: rgba(255,255,255,.35); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }

/* ---- Mobile nav ---- */
.burger { display:none; flex-direction:column; gap:4px; cursor:pointer; }
.burger span { width:24px; height:3px; background:#fff; border-radius:2px; }
@media (max-width: 720px){
  .site-nav { display:none; flex-direction:column; background:rgba(10,10,12,.95); position:absolute; top:72px; left:0; right:0; padding:12px; }
  .site-nav.active { display:flex; }
  .burger { display:flex; }
  .site-header { position:relative; }
}
/* Form adjustments */
@media (max-width: 600px){
  form[data-formspree] div { grid-template-columns:1fr !important; }
  form[data-formspree] button { width:100%; }
}

.whatsapp-btn{
  display:inline-flex; align-items:center; gap:.5rem;
  margin-left:.6rem; border:1px solid rgba(255,255,255,.2);
  background:#1fa855; color:white; text-decoration:none; padding:.6rem .9rem;
  border-radius:10px;
}
.whatsapp-btn:hover{ filter:brightness(1.1); }
.whatsapp-btn svg{ width:18px; height:18px; display:inline-block; }
@media (max-width: 560px){
  
  .hero .whatsapp-btn{ display:block; width:100%; margin-left:0; }
}

/* ---- Reviews stars ---- */
.stars{ display:inline-flex; gap:2px; vertical-align:middle; }
.star{ width:18px; height:18px; display:inline-block; }
.star svg{ width:100%; height:100%; }
.card.review{ display:grid; gap:.25rem; }
.card.review small{ opacity:.7; }

.header__brand img{ height:56px; width:auto; }
@media (max-width:720px){ .header__brand img{ height:44px; } }
.site-nav a{ border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.04); border-radius:10px; }
.site-nav a:hover{ background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.32); }
.site-nav a.active{ background:rgba(225,163,93,.15); border-color:rgba(225,163,93,.6); box-shadow:inset 0 0 0 1px rgba(225,163,93,.35); }
.hero .btn-row{ display:flex; flex-wrap:wrap; gap:.6rem; margin:.8rem 0 0; }
.cta.cta-primary{ background:#d4af37; color:#101015; border:1px solid rgba(0,0,0,.2); font-weight:600; }
.whatsapp-btn{ background:#1fa855; color:#fff; display:inline-flex; align-items:center; gap:.5rem; padding:.6rem .9rem; border-radius:10px; border:1px solid rgba(255,255,255,.2); text-decoration:none; }
.whatsapp-btn svg{ width:18px; height:18px; flex:0 0 18px; display:inline-block; }
@media (max-width:560px){ .hero .btn-row a{ display:block; width:100%; text-align:center; } }
.lang-switch a{ padding:.4rem .55rem; border:1px solid rgba(255,255,255,.25); border-radius:8px; }
.lang-switch a.active{ border-color: rgba(225,163,93,.7); box-shadow: inset 0 0 0 1px rgba(225,163,93,.35); }

@media (max-width: 720px){ .header__brand img{ height:44px; } }

.hero-img{ width:100%; height:320px; object-fit:cover; border-radius:14px; display:block; margin:12px 0 8px; }
@media (min-width:900px){ .hero-img{ height:420px; } }

.card-media{ height:180px; background:rgba(255,255,255,.04); border-bottom:1px solid rgba(255,255,255,.08); border-top-left-radius:12px; border-top-right-radius:12px; overflow:hidden; }
.card-img{ width:100%; height:100%; object-fit:cover; display:block; }

.lang-switch{ display:flex; gap:.4rem; margin-left:auto; }
.lang-btn{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.18);
  color:#fff; padding:.35rem .6rem; border-radius:10px; cursor:pointer; }
.lang-btn.active{ border-color:rgba(225,163,93,.7); box-shadow: inset 0 0 0 1px rgba(225,163,93,.35); }
/* === HERO ILLUSTRATION (Canvas network) === */
.hero-illustration{
  aspect-ratio: 16/9;             /* можно поставить 4/3, если так лучше выглядит */
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(800px 500px at 70% 10%, rgba(102,223,163,.12), transparent 60%),
    radial-gradient(700px 400px at 30% 0%,  rgba(155,140,255,.18), transparent 60%),
    #0b0f17;
  box-shadow: var(--shadow);
}
.hero-illustration canvas{
  width: 100%;
  height: 100%;
  display: block;
}
/* Центровка верхнего заголовка и кнопок */
.hero-top { text-align: center; }

.hero-top h1{
  margin: 0 auto 14px;      /* отступ под заголовком */
  padding: 0 20px;          /* чуть воздуха по краям */
}

.hero-top .btn-row{
  margin-top: 8px;
  display: flex;
  justify-content: center;  /* центр по горизонтали */
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;          /* перенос на мобильных */
}

.hero-top .cta{             /* чтобы кнопки вели себя как inline */
  display: inline-flex;
  align-items: center;
}
.hero-top .whatsapp-btn{ margin-left: 0; }
/* Подписи к полям формы */
form label{
  display:block;
  margin:6px 0 6px 4px;
  color:#cfd4ff;
  font-weight:600;
  letter-spacing:.2px;
}

.section--portfolio .card img{
  display:block;
  width:100%;
  aspect-ratio:16/9;        /* держим одинаковую высоту */
  object-fit:cover;         /* заполняем без искажений */
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
}