/* AlexElectro — Premium Dark UI (mesh gradient) */
:root{
  --bg-0:#070A16;
  --bg-1:#0A1025;
  --bg-2:#0C1633;
  --card:rgba(255,255,255,.06);
  --card-2:rgba(255,255,255,.08);
  --stroke:rgba(255,255,255,.10);
  --stroke-2:rgba(255,255,255,.14);
  --text:#EAF0FF;
  --muted:rgba(234,240,255,.72);
  --muted-2:rgba(234,240,255,.56);
  --brand:#5B7CFF;
  --brand-2:#8A5CFF;
  --good:#36D399;
  --warn:#FBBF24;
  --bad:#F43F5E;

  --radius:6px;
  --radius-sm:4px;
  --radius-xs:3px;
  --radius-lg:8px;
  --shadow: 0 20px 70px rgba(0,0,0,.55);
  --shadow-soft: 0 16px 50px rgba(0,0,0,.35);
  --max: 1120px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background: var(--bg-0);
  overflow-x:hidden;
  padding-top: var(--header-pad, 124px);
}
body::before{
  content:"";
  position:fixed; inset:-20px;
  background-image: url("/assets/images/mesh-gradient.png");
  background-size: cover;
  background-position: center;
  opacity:.30;
  filter:saturate(1.2) contrast(1.1);
  pointer-events:none;
  z-index:-2;
}
body::after{
  content:"";
  position:fixed; inset:0;
  background:
    radial-gradient(600px 600px at var(--mx, 50%) var(--my, 10%), rgba(91,124,255,.22), transparent 62%),
    radial-gradient(1400px 700px at 15% -15%, rgba(91,124,255,.42), transparent 60%),
    radial-gradient(1200px 700px at 85% 0%, rgba(138,92,255,.32), transparent 65%),
    radial-gradient(900px 600px at 55% 115%, rgba(91,124,255,.26), transparent 55%),
    radial-gradient(900px 700px at 50% 0%, rgba(255,255,255,.08), transparent 55%),
    linear-gradient(180deg, rgba(10,16,37,.24), rgba(7,10,22,.92));
  pointer-events:none;
  z-index:-1;
}


@media (prefers-reduced-motion: no-preference){
  body::before{ animation: meshDrift 18s ease-in-out infinite alternate; }
}
@keyframes meshDrift{
  from{ transform: translate3d(-1.2%, -0.8%, 0) scale(1.06); }
  to{ transform: translate3d(1.2%, 0.8%, 0) scale(1.08); }
}

/* Typography */
h1,h2,h3{
  font-family: "Space Grotesk", Inter, system-ui, sans-serif;
  letter-spacing:-.02em;
  margin:0 0 .55rem;
}
h1{ font-size: clamp(2.1rem, 3.8vw, 3.4rem); line-height:1.05; }
h2{ font-size: clamp(1.6rem, 2.2vw, 2.2rem); line-height:1.12; }
h3{ font-size: 1.1rem; line-height:1.2; }
p{ margin:.6rem 0 0; }
a{ color:inherit; text-decoration:none; }
a:hover{ color:var(--text); }

.container{
  width: min(var(--max), calc(100% - 40px));
  margin: 0 auto;
}
.muted{ color: var(--muted); }
.muted-2{ color: var(--muted-2); }

/* Helpers */
.reveal{ opacity:0; transform: translateY(14px); transition: .7s cubic-bezier(.2,.8,.2,1); transition-delay: var(--d, 0ms); will-change: transform, opacity; }
.reveal.on,
.reveal.is-in{ opacity:1; transform:none; }
.grad{
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  background-size: 180% 180%;
  animation: gradShift 8s ease-in-out infinite;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

@keyframes gradShift{ 0%{background-position: 0% 50%;} 50%{background-position: 100% 50%;} 100%{background-position: 0% 50%;} }

/* Header */
.site{
  position:fixed; top:0; left:0; right:0; z-index:9999;
  backdrop-filter: blur(16px) saturate(140%);
  background: rgba(5,7,16,.58);
  border-bottom:1px solid rgba(255,255,255,.08);
}

.scroll-progress{ position:absolute; left:0; right:0; bottom:-1px; height:3px; background: linear-gradient(90deg, rgba(91,124,255,.0), rgba(91,124,255,.95), rgba(138,92,255,.95), rgba(91,124,255,.0)); transform-origin: 0 50%; transform: scaleX(0); opacity:.9; filter: drop-shadow(0 6px 18px rgba(91,124,255,.55)); }
.site.scrolled .scroll-progress{ opacity:1; }
.topbar{
  display:flex; gap:10px; align-items:center; justify-content:center;
  padding:10px 0;
  max-height:64px;
  transition: max-height .35s ease, padding .35s ease, opacity .25s ease, transform .35s ease;
}
.site.scrolled .topbar{
  max-height:0;
  padding:0;
  opacity:0;
  transform: translateY(-6px);
  pointer-events:none;
}
.site.scrolled .nav{ padding:10px 0 12px; }

.pill{
  display:inline-flex; gap:8px; align-items:center;
  padding:8px 12px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  color: rgba(234,240,255,.86);
  font-size:.92rem;
}
.pill:hover{ border-color: rgba(255,255,255,.18); }


/* Dropdowns (Lang/User) */
.lang-dd, .user-dd{ position:relative; display:inline-flex; }
.dd-btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 12px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  color: rgba(234,240,255,.92);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  cursor:pointer;
  white-space:nowrap;
}
.dd-btn:hover{ border-color: rgba(255,255,255,.18); }
.dd-label{ font-weight:700; letter-spacing:.02em; }
.dd-menu{
  position:absolute; right:0; top: calc(100% + 10px);
  min-width: 160px;
  padding:8px;
  border-radius: var(--radius);
  background: rgba(10,16,37,.92);
  border:1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(16px) saturate(140%);
  box-shadow: var(--shadow-soft);
  display:none;
}
[data-dd].open .dd-menu{ display:block; animation: pop .14s ease-out; }
.dd-item, .dd-link{
  width:100%;
  display:flex; align-items:center; gap:10px;
  padding:10px 10px;
  border-radius: var(--radius-sm);
  border:0;
  background: transparent;
  color: rgba(234,240,255,.92);
  text-decoration:none;
  font-weight:700;
  cursor:pointer;
}
.dd-item:hover, .dd-link:hover{ background: rgba(255,255,255,.07); }
.dd-menu form{ margin:0; }
@keyframes pop{ from{ transform: translateY(-6px); opacity:0;} to{ transform: translateY(0); opacity:1;} }

.ico-sm{ opacity:.9; }
.ico-md{ opacity:.95; }
.ico-fallback{ font-weight:700; opacity:.9; }

.nav{
  display:flex; align-items:center; gap:16px;
  padding:14px 0 16px;
}
.logo{
  font-weight:800;
  letter-spacing:-.03em;
  font-size:1.2rem;
  margin-right:8px;
}
.logo b{ color: var(--brand); }

.menu{
  display:flex; gap:14px; align-items:center;
  flex:1;
  flex-wrap:nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  min-width: 0;
}
.menu::-webkit-scrollbar{ display:none; }
.menu a{
  padding:10px 12px;
  white-space: nowrap;
  word-break: keep-all;
  border-radius: var(--radius-sm);
  color: rgba(234,240,255,.78);
  border:1px solid transparent;
}
.menu a:hover{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.10);
  color: rgba(234,240,255,.92);
}
.badge-soft{
  display:inline-flex; gap:8px; align-items:center;
  padding:8px 12px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  color: rgba(234,240,255,.85);
}

.lang-switch{
  display:inline-flex;
  padding:6px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  gap:6px;
}
.lang-switch button{
  appearance:none; border:0; cursor:pointer;
  background: transparent;
  color: rgba(234,240,255,.72);
  padding:8px 10px;
  border-radius: var(--radius-sm);
  font-weight:700;
  letter-spacing:.02em;
}
.lang-switch button.active{
  background: linear-gradient(135deg, rgba(91,124,255,.35), rgba(138,92,255,.28));
  border:1px solid rgba(255,255,255,.10);
  color: var(--text);
}

.cta{ display:flex; align-items:center; }
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 16px;
  border-radius: var(--radius-sm);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: var(--text);
  cursor:pointer;
  font-weight:700;
}
.btn:hover{ border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.08); }
.btn-ico{ display:inline-flex; }

/* Electric highlight */
.btn{
  position: relative;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.btn:hover{
  box-shadow: 0 18px 55px rgba(91,124,255,.18);
}
.btn-primary:hover{
  box-shadow: 0 22px 80px rgba(91,124,255,.32), 0 0 0 1px rgba(255,255,255,.12) inset;
}
.btn-primary{
  background: linear-gradient(135deg, rgba(91,124,255,.85), rgba(138,92,255,.75));
  border-color: rgba(255,255,255,.16);
  box-shadow: 0 18px 60px rgba(91,124,255,.22);
}
.btn-primary:hover{ filter: brightness(1.05); }
.btn-ghost{
  background: rgba(255,255,255,.04);
}

.burger{ display:none; }


/* Global section spacing */
section.container{ padding: 96px 0; }
section.hero.container{ padding: 72px 0 56px; }
@media (max-width: 920px){
  section.container{ padding: 78px 0; }
  section.hero.container{ padding: 56px 0 44px; }
}
/* Sections */
.section-title{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:16px; margin: 18px 0 26px;
}
.section-title h2{
  position:relative;
}
.section-title h2::after{
  content:"";
  display:block;
  width: 74px;
  height: 3px;
  margin-top:10px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  opacity:.9;
}

.hero{ padding: 72px 0 56px; }
.grid-hero{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 30px;
  align-items: stretch;
}
.kicker{
  display:inline-flex;
  padding:8px 12px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  color: rgba(234,240,255,.85);
  font-weight:700;
}
.lead{
  color: rgba(234,240,255,.78);
  font-size: 1.07rem;
  line-height: 1.55;
  max-width: 60ch;
  margin-top: 14px;
}


.rotline{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top: 18px;
  font-weight: 900;
  letter-spacing: -.01em;
}
.rotline .bolt-ico{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color: rgba(234,240,255,.92);
  filter: drop-shadow(0 10px 26px rgba(91,124,255,.35));
}
.rotline .rot-text{ font-size: 1.05rem; }
.chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top: 18px; }
.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 12px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  color: rgba(234,240,255,.85);
  font-weight:600;
}
.screen{
  border-radius: var(--radius-lg);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  box-shadow: var(--shadow);
  position: relative;
}

.screen::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(520px 320px at 20% 10%, rgba(91,124,255,.32), transparent 60%),
    radial-gradient(460px 300px at 80% 30%, rgba(138,92,255,.22), transparent 62%);
  opacity:.55;
  mix-blend-mode: screen;
  pointer-events:none;
}
.screen::after{
  content:"";
  position:absolute; inset:0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
  pointer-events:none;
}

.screen img{ width:100%; height:100%; flex:1; display:block; object-fit: cover; transform: scale(1.02); }
.ticker{
  position:absolute; left:0; right:0; bottom:0;
  height: 46px;
  display:flex;
  align-items:center;
  background: rgba(0,0,0,.62);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255,255,255,.10);
  overflow:hidden;
}
.ticker .row{
  display:flex;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items:center;
  gap:24px;
  height: 46px;
  padding:0;
  white-space:nowrap;
  animation: ticker 18s linear infinite;
  color: rgba(234,240,255,.82);
  font-weight:700;
}
.ticker .row span{ display:inline-block; flex: 0 0 auto; }
@keyframes ticker{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* Cards */
.card{
  background: rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.10);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow-soft);
}
.card:hover{ border-color: rgba(255,255,255,.16); }
.card .ico{
  width:42px; height:42px;
  border-radius: var(--radius-sm);
  display:grid; place-items:center;
  background: linear-gradient(135deg, rgba(91,124,255,.25), rgba(138,92,255,.18));
  border:1px solid rgba(255,255,255,.12);
  margin-bottom: 10px;
}
.shot img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  filter: saturate(1.05) contrast(1.05);
}

.services{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.portfolio{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.work{
  border-radius: var(--radius);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  box-shadow: var(--shadow-soft);
  position: relative;
}
.work img{
  width:100%;
  height: 190px;
  object-fit: cover;
  display:block;
  transition: transform .35s ease, filter .35s ease;
  will-change: transform;
}
.work:hover img{
  transform: scale(1.055);
  filter: saturate(1.08) contrast(1.06);
}

/* Service card "Learn more" button (shown only on hover) */

/* Service card media + centered "More" button */
.service-card .shot{ position:relative; overflow:hidden; border-radius: var(--radius); }
.service-card .shot img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform .35s ease; }
.service-card:hover .shot img{ transform: scale(1.04); }

.svc-more-btn{
  position:absolute;
  left:50%; top:50%;
  transform: translate(-50%,-50%) scale(.98);
  padding:10px 14px;
  border-radius: var(--radius-sm);
  border:1px solid rgba(255,255,255,.12);
  background: rgba(8,12,26,.55);
  backdrop-filter: blur(10px) saturate(140%);
  color: rgba(234,240,255,.95);
  font-weight:800;
  text-decoration:none;
  opacity:0;
  pointer-events:none;
  transition: opacity .18s ease, transform .18s ease, border-color .18s ease;
  box-shadow: 0 16px 40px rgba(0,0,0,.35);
}
.service-card.has-more:hover .svc-more-btn{
  opacity:1;
  pointer-events:auto;
  transform: translate(-50%,-50%) scale(1);
}
.svc-more-btn:hover{ border-color: rgba(91,124,255,.45); }

.service-card{ position: relative; }
.service-card.has-more{ padding-bottom: 56px; }
.service-card .svc-more{
  position: absolute;
  left: 18px;
  bottom: 16px;
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}
.service-card.has-more:hover .svc-more{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Service details page */
.svc-page{
  padding-top: 16px;
}
.svc-hero{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 16px;
  align-items: start;
}
.svc-slider{
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  box-shadow: var(--shadow-soft);
}
.svc-slides{ position: relative; aspect-ratio: 16/10; }
.svc-slide{
  position:absolute;
  inset:0;
  opacity:0;
  transform: scale(1.01);
  transition: opacity .35s ease, transform .45s ease;
}
.svc-slide.is-active{ opacity:1; transform: scale(1); }
.svc-slide img{ width:100%; height:100%; object-fit: cover; display:block; }

.svc-nav{
  position:absolute;
  inset:0;
  display:flex;
  justify-content: space-between;
  align-items:center;
  pointer-events: none;
  padding: 0 10px;
}
.svc-nav button{
  pointer-events: auto;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  border:1px solid rgba(255,255,255,.14);
  background: rgba(10,16,40,.35);
  backdrop-filter: blur(10px);
  color: rgba(255,255,255,.92);
  display:grid;
  place-items:center;
}
.svc-nav button:hover{ background: rgba(10,16,40,.5); }

.svc-dots{
  position:absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  display:flex;
  gap: 8px;
  justify-content:center;
}
.svc-dots button{
  width: 8px;
  height: 8px;
  border-radius: 3px;
  border: 0;
  background: rgba(255,255,255,.22);
  cursor:pointer;
}
.svc-dots button.is-active{ background: rgba(255,255,255,.72); }

.svc-aside{
  position: sticky;
  top: 96px;
}
.svc-aside .tile{ padding: 18px; }
.svc-aside .cta-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }

.svc-content{
  margin-top: 14px;
}
.svc-content h1{ margin: 0 0 10px; }
.svc-content .muted{ color: rgba(234,240,255,.72); }

@media (max-width: 980px){
  .svc-hero{ grid-template-columns: 1fr; }
  .svc-aside{ position: static; }
}
.work .cap{
  padding: 12px 12px 14px;
}
.tag{
  display:inline-flex;
  padding:6px 10px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  color: rgba(234,240,255,.82);
  font-weight:700;
  font-size:.85rem;
}

/* About */
.about{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.tile{
  background: rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.10);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow-soft);
}
.list{
  margin: 12px 0 0;
  padding-left: 18px;
  color: rgba(234,240,255,.82);
}
.list li{ margin: 8px 0; }


.about{ align-items: stretch; }
.about .tile{ height: 100%; }
.about-left{
  display:flex;
  flex-direction: column;
}
.about-left .list{ flex: 1; }
.about-left .about-note{ margin-top: auto; padding-top: 8px; }
/* FAQ */
.faq{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.faq details{
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.faq summary{
  cursor:pointer;
  font-weight:800;
  list-style:none;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq details[open]{ border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.07); }
.faq details p{ color: rgba(234,240,255,.78); }

/* Forms */
.field label{
  display:block;
  font-size:.9rem;
  color: rgba(234,240,255,.72);
  margin: 0 0 6px;
}
input, textarea, select{
  width:100%;
  padding: 12px 12px;
  border-radius: var(--radius-sm);
  border:1px solid rgba(255,255,255,.12);
  background: rgba(10,16,37,.55);
  color: var(--text);
  outline:none;
}
input:focus, textarea:focus, select:focus{
  border-color: rgba(91,124,255,.55);
  box-shadow: 0 0 0 4px rgba(91,124,255,.18);
}
textarea{ min-height: 120px; resize: vertical; }

/* Admin + Portal */
.admin-shell{
  display:grid;
  grid-template-columns: 260px 1fr;
  gap: 16px;
  align-items:start;
}
.admin-aside{
  position: sticky;
  top: 104px;
  border-radius: var(--radius);
  padding: 14px;
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
}
.admin-aside a{
  display:flex; align-items:center; gap:10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: rgba(234,240,255,.78);
  border:1px solid transparent;
}
.admin-aside a:hover{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.10); color: rgba(234,240,255,.92); }
.admin-aside a.active{
  background: linear-gradient(135deg, rgba(91,124,255,.22), rgba(138,92,255,.16));
  border-color: rgba(255,255,255,.12);
  color: var(--text);
}
.tabs{
  display:flex; flex-wrap:wrap; gap:8px;
}
.tab-btn{
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: rgba(234,240,255,.78);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  cursor:pointer;
  font-weight:800;
}
.tab-btn.active{
  background: linear-gradient(135deg, rgba(91,124,255,.30), rgba(138,92,255,.22));
  border-color: rgba(255,255,255,.16);
  color: var(--text);
}
.tab-panel{ display:none; }
.tab-panel.active{ display:block; }

.table{
  width:100%;
  border-collapse: collapse;
}
.table th, .table td{
  padding: 10px 10px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  text-align:left;
  color: rgba(234,240,255,.82);
}
.table th{ color: rgba(234,240,255,.95); font-weight:800; }
.table tr:hover td{ background: rgba(255,255,255,.03); }

/* Footer */
.footer .card{ background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10); border-radius: var(--radius-lg); padding: 18px; box-shadow: var(--shadow-soft); }
.footer .actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }
.footer .actions .btn{ border-radius: var(--radius-sm); }

.footer{
  margin-top: 72px;
  padding: 44px 0 64px;
  border-top:1px solid rgba(255,255,255,.08);
  background: rgba(5,7,16,.40);
  backdrop-filter: blur(12px) saturate(135%);
  position: relative;
  overflow: visible;
}
.footer::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(900px 420px at 20% 0%, rgba(91,124,255,.16), transparent 60%),
    radial-gradient(900px 420px at 80% 0%, rgba(138,92,255,.12), transparent 62%);
  pointer-events:none;
}
.footer .container{ padding: 0; position: relative; }
.footer .grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 16px;
}
.footer small{ color: rgba(234,240,255,.56); }

/* Responsive */
@media (max-width: 980px){

  .menu.open{
    display:flex;
    position: fixed;
    top: 84px;
    left: 20px;
    right: 20px;
    flex-direction: column;
    padding: 10px;
    border-radius: 18px;
    background: rgba(5,7,16,.78);
    border:1px solid rgba(255,255,255,.12);
    backdrop-filter: blur(18px);
    box-shadow: 0 30px 90px rgba(0,0,0,.6);
  }
  body.no-scroll{ overflow:hidden; }

  .grid-hero{ grid-template-columns: 1fr; }
  .services{ grid-template-columns: 1fr; }
  .portfolio{ grid-template-columns: 1fr 1fr; }
  .about{ grid-template-columns: 1fr; }
  .faq{ grid-template-columns: 1fr; }
  .admin-shell{ grid-template-columns: 1fr; }
  .admin-aside{ position: relative; top:auto; }
  .menu{ display:none; }
  .burger{ display:inline-flex; align-items:center; justify-content:center; gap:6px; width:44px; height:44px; border-radius: var(--radius-lg);
           border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); color:var(--text); cursor:pointer; }
  .burger .bar{ display:block; width:18px; height:2px; background: rgba(234,240,255,.85); border-radius:3px; }
}

/* Home extras */
.badges{ display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.stat{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; margin-top:18px;
  padding: 14px 16px;
  border-radius: var(--radius);
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
}
.num{
  font-family:"Space Grotesk", Inter, system-ui, sans-serif;
  font-size: 2.1rem;
  font-weight: 800;
  letter-spacing:-.03em;
  line-height:1;
}
.brands{
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}
.brand{
  padding: 12px 12px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  color: rgba(234,240,255,.72);
  font-weight: 800;
  text-align:center;
}

/* Flash / notices */
.notice{
  display:flex; gap:10px; align-items:center;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  color: rgba(234,240,255,.88);
}
.notice.ok{ border-color: rgba(54,211,153,.35); background: rgba(54,211,153,.08); }
.notice.err{ border-color: rgba(244,63,94,.35); background: rgba(244,63,94,.08); }

/* Forms layout */
.form-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.form-grid .row{ display:contents; }
.form-grid .field{ }
.form-grid .actions{ grid-column: 1 / -1; display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
@media (max-width: 980px){

  .menu.open{
    display:flex;
    position: fixed;
    top: 84px;
    left: 20px;
    right: 20px;
    flex-direction: column;
    padding: 10px;
    border-radius: 18px;
    background: rgba(5,7,16,.78);
    border:1px solid rgba(255,255,255,.12);
    backdrop-filter: blur(18px);
    box-shadow: 0 30px 90px rgba(0,0,0,.6);
  }
  body.no-scroll{ overflow:hidden; }

  .brands{ grid-template-columns: repeat(2, 1fr); }
  .form-grid{ grid-template-columns: 1fr; }
}

/* Error page */
.error-wrap{
  padding: 64px 0;
}

.admin-main{ min-width:0; }

.dot{ width:8px; height:8px; border-radius: var(--radius-sm); background: linear-gradient(135deg, var(--brand), var(--brand-2)); box-shadow: 0 0 18px rgba(91,124,255,.45); }

/* Flex helpers */
.row{ display:flex; gap:12px; flex-wrap:wrap; }
.actions{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }


/* Mobile quickbar */
.quickbar{ display:none; position:fixed; left:14px; right:14px; bottom:14px; z-index:60; padding:10px; border-radius: var(--radius); background: rgba(5,7,16,.72); border:1px solid rgba(255,255,255,.12); backdrop-filter: blur(16px); box-shadow: 0 20px 80px rgba(0,0,0,.6); }
.quickbar .q{ flex:1; display:flex; align-items:center; justify-content:center; gap:8px; padding:10px 12px; border-radius: var(--radius-sm); border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.06); color: rgba(234,240,255,.9); font-weight:800; }
.quickbar .q:hover{ border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.08); }
@media (max-width: 980px){ .quickbar{ display:flex; gap:10px; } }


/* Premium hover */
.card{ transition: transform .25s ease, border-color .25s ease, background .25s ease; }
.card:hover{ transform: translateY(-2px); border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.08); }
.shot{ transition: transform .35s ease, filter .35s ease; }
a.shot:hover img{ transform: scale(1.03); filter: saturate(1.15) contrast(1.08); }

/* About page mini photo (variant A) */
.about-head{ display:flex; align-items:center; justify-content:flex-start; gap:18px; margin-bottom:18px; }
.about-mini{ width:84px; height:84px; border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); overflow:hidden; }
.about-mini-img{ width:100%; height:100%; object-fit:cover; display:block; }