/* ==========================================================================
   iЦИФРА — сайт сервисного центра. Тёмный премиальный стиль.
   ========================================================================== */

:root {
  --bg: #05070c;
  --bg-elevated: #0b1018;
  --bg-card: #0f1523;
  --bg-card-hover: #131b2c;
  --navy: #1d2759;
  --navy-soft: #202a4f;
  --cyan: #1aa3d9;
  --cyan-bright: #4fd0f7;
  --cyan-dim: rgba(26, 163, 217, 0.14);
  --text: #f3f6fa;
  --text-muted: #98a3b8;
  --text-faint: #5c6780;
  --border: rgba(255, 255, 255, 0.08);
  --border-bright: rgba(79, 208, 247, 0.35);
  --radius: 18px;
  --radius-sm: 10px;
  --shadow-glow: 0 0 80px rgba(26, 163, 217, 0.15);
  --maxw: 1180px;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-display: 'Onest', var(--font);
  --samsung-blue: #1428A0;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan-bright);
  margin-bottom: 18px;
}
.eyebrow::before {
  content: '';
  width: 28px;
  height: 2px;
  background: linear-gradient(90deg, var(--cyan), transparent);
}

.ico { display: inline-flex; flex-shrink: 0; }
.ico svg { width: 100%; height: 100%; display: block; }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.01em; margin: 0 0 16px; }
p { color: var(--text-muted); margin: 0 0 16px; }

.section { padding: 96px 0; position: relative; }
.section-head { max-width: 640px; margin-bottom: 56px; }
.section-head h2 { font-size: clamp(28px, 4vw, 42px); line-height: 1.15; }
.section-head p { font-size: 17px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 30px;
  border-radius: 100px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
  cursor: pointer;
  border: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  white-space: nowrap;
}
.btn-primary {
  background: linear-gradient(135deg, var(--cyan-bright), var(--cyan) 70%);
  color: #04101a;
  box-shadow: 0 8px 24px rgba(26, 163, 217, 0.35);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(26, 163, 217, 0.5); }
.btn-ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}
.btn-ghost:hover { border-color: var(--border-bright); background: var(--cyan-dim); }
.btn-block { width: 100%; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(5, 7, 12, 0.78);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 82px;
}
.logo { display: flex; align-items: center; flex-shrink: 0; }
.logo img { height: 48px; width: auto; }
.logo-mark { display: none; }
.nav-links {
  display: flex;
  align-items: center;
  gap: 34px;
}
.nav-links a {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-muted);
  transition: color 0.2s;
}
.nav-links a:hover, .nav-links a.active { color: var(--text); }
.header-actions { display: flex; align-items: center; gap: 16px; }
.header-phone { font-weight: 700; font-size: 15px; color: var(--text); }
.header-phone span { display: block; font-size: 11px; font-weight: 500; color: var(--text-faint); }
.burger {
  display: none;
  width: 40px; height: 40px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  align-items: center; justify-content: center;
  cursor: pointer;
}
.burger .ico { width: 18px; height: 18px; }
.mobile-nav {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 12px 24px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elevated);
}
.mobile-nav a { padding: 12px 4px; font-weight: 600; color: var(--text-muted); border-bottom: 1px solid var(--border); }
.mobile-nav.open { display: flex; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: 72px 0 40px;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 720px;
  background:
    radial-gradient(closest-side at 15% 35%, rgba(168, 85, 247, 0.28), transparent 65%),
    radial-gradient(closest-side at 65% 75%, rgba(236, 72, 153, 0.16), transparent 60%),
    radial-gradient(closest-side at 85% 15%, rgba(26, 163, 217, 0.22), transparent 65%),
    radial-gradient(closest-side at 80% 20%, rgba(29, 39, 89, 0.55), transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 40px;
  align-items: center;
}
.hero h1 {
  font-size: clamp(38px, 5.4vw, 68px);
  line-height: 1.03;
  text-transform: uppercase;
  margin-bottom: 22px;
}
.hero h1 .accent { color: var(--cyan-bright); }
.hero-sub { font-size: 18px; max-width: 480px; margin-bottom: 32px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 40px; }
.hero-stats { display: flex; gap: 36px; flex-wrap: wrap; }
.hero-stat b { display: block; font-family: 'Play', var(--font-display); font-size: 26px; font-weight: 700; letter-spacing: 0.02em; color: var(--text); }
.hero-stat span { font-size: 13px; color: var(--text-faint); }

/* ---------- Foldable phone photography (official Samsung product renders) ---------- */
.hero-visual {
  position: relative;
  height: 460px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-visual .glow {
  position: absolute;
  width: 420px; height: 420px;
  background:
    radial-gradient(circle at 35% 40%, rgba(168, 85, 247, 0.32), transparent 55%),
    radial-gradient(circle at 65% 60%, rgba(79, 208, 247, 0.28), transparent 55%);
  filter: blur(14px);
  z-index: 0;
}
.hero-photo {
  position: absolute;
  height: auto;
  filter: drop-shadow(0 30px 40px rgba(0,0,0,0.55)) drop-shadow(0 8px 60px rgba(168, 85, 247, 0.22));
  transition: transform 0.4s cubic-bezier(.25,.8,.25,1), filter 0.4s ease;
}
.fold-photo { left: 4%; width: 240px; animation: photo-float-a 7s ease-in-out infinite; }
.flip-photo { right: 6%; width: 290px; animation: photo-float-b 6s ease-in-out infinite; }
.hero-photo:hover { transform: scale(1.06) translateY(-6px); filter: drop-shadow(0 40px 55px rgba(0,0,0,0.65)) drop-shadow(0 8px 70px rgba(168, 85, 247, 0.32)); }

@keyframes photo-float-a {
  0%, 100% { transform: translateY(0) rotateZ(-4deg); }
  50% { transform: translateY(-14px) rotateZ(-1.5deg); }
}
@keyframes photo-float-b {
  0%, 100% { transform: translateY(0) rotateZ(4deg); }
  50% { transform: translateY(-10px) rotateZ(6deg); }
}

/* ---------- Device showcase (Fold & Flip specialisation section) ---------- */
.showcase-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.showcase-card {
  position: relative;
  background: linear-gradient(180deg, var(--bg-card), var(--bg-elevated));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 36px 34px 34px;
  overflow: hidden;
  box-shadow: 0 24px 60px -20px rgba(0,0,0,0.55);
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.showcase-card:hover { border-color: var(--border-bright); transform: translateY(-6px); box-shadow: 0 32px 70px -18px rgba(0,0,0,0.65); }
.showcase-card.fold-card { background: radial-gradient(140% 120% at 15% 0%, #241a38 0%, #150f24 42%, var(--bg-elevated) 78%); }
.showcase-card.flip-card { background: radial-gradient(140% 120% at 85% 0%, #131b3a 0%, #10132a 42%, var(--bg-elevated) 78%); }
.samsung-badge {
  position: absolute; top: 24px; right: 24px; z-index: 2;
  background: var(--samsung-blue);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  padding: 5px 10px;
  border-radius: 5px;
}
.showcase-visual {
  position: relative;
  height: 320px;
  display: grid;
  place-items: center;
  margin-bottom: 20px;
}
.showcase-visual .glow {
  position: absolute; width: 300px; height: 300px;
  border-radius: 50%; filter: blur(18px); z-index: 0;
}
.showcase-visual .fold-glow { background: radial-gradient(circle, rgba(192,86,247,0.4), transparent 68%); }
.showcase-visual .flip-glow { background: radial-gradient(circle, rgba(99,102,241,0.4), transparent 68%); }
.showcase-photo {
  grid-area: 1 / 1;
  position: relative;
  max-height: 290px;
  max-width: 100%;
  width: auto;
  filter: drop-shadow(0 22px 40px rgba(0,0,0,0.6));
  transition: transform 0.4s cubic-bezier(.25,.8,.25,1), filter 0.4s ease, opacity 0.35s ease;
}
.showcase-card:hover .showcase-photo { transform: scale(1.05) translateY(-6px); filter: drop-shadow(0 30px 50px rgba(0,0,0,0.7)); }
.showcase-video {
  grid-area: 1 / 1;
  position: relative;
  max-height: 290px;
  max-width: 100%;
  width: auto;
  border-radius: 14px;
  opacity: 0;
  box-shadow: 0 22px 46px -6px rgba(0,0,0,0.7);
  transition: opacity 0.35s ease, transform 0.4s cubic-bezier(.25,.8,.25,1);
  pointer-events: none;
}
.showcase-card:hover .showcase-video { opacity: 1; transform: scale(1.05) translateY(-6px); }
.showcase-card:hover .showcase-photo { opacity: 0; }
.showcase-card h3 { font-size: 21px; margin-bottom: 10px; }
.showcase-card > p { font-size: 14.5px; margin-bottom: 22px; }
.showcase-features { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.showcase-features li {
  display: flex; align-items: center; gap: 9px;
  font-size: 13.5px; font-weight: 600; color: var(--text-muted);
}
.showcase-features .ico { width: 17px; height: 17px; color: var(--cyan-bright); }

/* ---------- Marquee / trust bar ---------- */
.trust-bar {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 22px 0;
  background: var(--bg-elevated);
}
.trust-bar .wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px 32px;
}
.trust-item { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; font-weight: 600; color: var(--text-muted); }
.trust-item b { color: var(--text); }
.trust-item .check { flex-shrink: 0; color: var(--cyan-bright); line-height: 1.5; }

/* ---------- Services grid ---------- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.service-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 30px 26px;
  transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.service-card:hover { transform: translateY(-4px); border-color: var(--border-bright); background: var(--bg-card-hover); }
.service-card .icon {
  width: 48px; height: 48px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  color: var(--cyan-bright);
  background: var(--cyan-dim);
  margin-bottom: 20px;
}
.service-card .icon .ico { width: 24px; height: 24px; }
.service-card h3 { font-size: 18px; margin-bottom: 10px; }
.service-card p { font-size: 14.5px; margin-bottom: 0; }

/* ---------- Price table ---------- */
.price-tabs { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 32px; }
.price-tab {
  padding: 10px 20px;
  border-radius: 100px;
  border: 1px solid var(--border);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  background: transparent;
  transition: all 0.2s;
}
.price-tab.active, .price-tab:hover { border-color: var(--border-bright); color: var(--text); background: var(--cyan-dim); }

.price-category { margin-bottom: 44px; }
.price-category h3 {
  font-size: 20px;
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 18px;
}
.price-category h3::after { content: ''; flex: 1; height: 1px; background: var(--border); }

.price-table { width: 100%; border-collapse: collapse; }
.price-table tr { border-bottom: 1px solid var(--border); }
.price-table tr:last-child { border-bottom: none; }
.price-table td { padding: 15px 6px; font-size: 15px; }
.price-table .model { color: var(--text-faint); font-size: 13px; }
.price-table .work { color: var(--text); font-weight: 600; }
.price-table .price { text-align: right; color: var(--cyan-bright); font-weight: 800; white-space: nowrap; }
.price-table .col-model { width: 1%; white-space: nowrap; }
.model-select {
  appearance: none;
  background: var(--bg-card) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234fd0f7' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 13px;
  border: 1px solid var(--border);
  border-radius: 100px;
  color: var(--text);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  padding: 8px 34px 8px 15px;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.model-select:hover, .model-select:focus { border-color: var(--border-bright); background-color: var(--bg-card-hover); outline: none; }
.model-select option { background: var(--bg-card); color: var(--text); }
.price-note { font-size: 13.5px; color: var(--text-faint); margin-top: 18px; }

/* ---------- News ---------- */
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.news-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.25s ease, border-color 0.25s ease;
  display: flex; flex-direction: column;
}
.news-card:hover { transform: translateY(-4px); border-color: var(--border-bright); }
.news-cover {
  height: 150px;
  background: linear-gradient(135deg, var(--navy), #0a0e1a);
  overflow: hidden;
}
.news-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.news-card .body { padding: 24px; flex: 1; display: flex; flex-direction: column; }
.news-date { font-size: 12.5px; color: var(--text-faint); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 10px; }
.news-card h3 { font-size: 17px; margin-bottom: 10px; line-height: 1.3; }
.news-card p { font-size: 14px; flex: 1; }
.news-more { font-size: 13.5px; font-weight: 700; color: var(--cyan-bright); margin-top: 12px; }

.article { max-width: 760px; margin: 0 auto; }
.article-cover { width: 100%; height: 320px; object-fit: cover; border-radius: var(--radius); margin: 20px 0 8px; display: block; }
.article-content p { color: var(--text); font-size: 16.5px; line-height: 1.8; }
.article-content { margin-top: 28px; }
.article-content h3 { font-size: 21px; margin: 36px 0 14px; }
.article-list { display: flex; flex-direction: column; gap: 10px; margin: 0 0 16px; }
.article-list li {
  position: relative; padding-left: 26px;
  color: var(--text); font-size: 16px; line-height: 1.6;
}
.article-list li::before {
  content: ''; position: absolute; left: 0; top: 9px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--cyan-bright); box-shadow: 0 0 8px rgba(79,208,247,0.6);
}

/* ---------- FAQ ---------- */
.faq-block { margin-top: 44px; }
.faq-block h3 { font-size: 21px; margin-bottom: 16px; }
.faq-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px 20px;
  margin-bottom: 10px;
}
.faq-item summary {
  padding: 16px 0;
  font-weight: 700;
  font-size: 15.5px;
  color: var(--text);
  cursor: pointer;
  list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  flex-shrink: 0;
  font-size: 22px; font-weight: 400;
  color: var(--cyan-bright);
  transition: transform 0.2s ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { padding-bottom: 18px; margin: -4px 0 0; font-size: 14.5px; }

/* ---------- Reviews ---------- */
.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.review-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
}
.review-stars { display: flex; gap: 3px; margin-bottom: 14px; }
.star { display: inline-flex; width: 15px; height: 15px; color: var(--text-faint); }
.star svg { width: 100%; height: 100%; }
.star.on { color: var(--cyan-bright); }
.star.on svg path { fill: currentColor; }
.admin-table .star { width: 14px; height: 14px; }
.review-card p { color: var(--text); font-size: 15px; }
.review-author { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; font-size: 13.5px; }
.review-author b { color: var(--text); }
.review-author span { color: var(--text-faint); }
.reviews-cta { text-align: center; margin-top: 40px; }

/* ---------- Contacts / order form ---------- */
.contacts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: start; }
.contact-info-list { margin-top: 28px; display: flex; flex-direction: column; gap: 22px; }
.contact-info-item { display: flex; gap: 16px; }
.contact-info-item .ic {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--cyan-dim); color: var(--cyan-bright);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.contact-info-item .ic .ico { width: 20px; height: 20px; }
.contact-info-item b { display: block; color: var(--text); font-size: 15px; margin-bottom: 3px; }
.contact-info-item span { color: var(--text-muted); font-size: 14.5px; }
.map-embed { border-radius: var(--radius); overflow: hidden; margin-top: 28px; border: 1px solid var(--border); }
.map-embed iframe { display: block; width: 100%; height: 260px; border: 0; filter: grayscale(0.3) invert(0.92) contrast(0.9); }

.order-form {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 36px;
}
.form-row { margin-bottom: 18px; }
.form-row label { display: block; font-size: 13.5px; font-weight: 700; margin-bottom: 8px; color: var(--text-muted); }
.form-row input, .form-row select, .form-row textarea {
  width: 100%;
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text);
  font-family: inherit;
  font-size: 14.5px;
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus { outline: none; border-color: var(--border-bright); }
.form-row textarea { resize: vertical; min-height: 90px; }
.form-note { font-size: 12.5px; color: var(--text-faint); margin-top: 14px; text-align: center; }
.form-status { font-size: 14px; font-weight: 600; margin-top: 14px; text-align: center; display: none; }
.form-status.ok { color: #5fd48a; display: block; }
.form-status.err { color: #f27272; display: block; }

/* ---------- CTA band ---------- */
.cta-band {
  border-radius: 24px;
  background: linear-gradient(135deg, var(--navy), #0a0e1a 70%);
  border: 1px solid var(--border-bright);
  padding: 56px 48px;
  display: flex; align-items: center; justify-content: space-between; gap: 30px;
  flex-wrap: wrap;
}
.cta-band h2 { margin-bottom: 8px; font-size: 28px; }
.cta-band p { margin-bottom: 0; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--border); padding: 60px 0 30px; background: var(--bg-elevated); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }
.footer-grid h4 { font-size: 13.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-faint); margin-bottom: 18px; }
.footer-grid ul { display: flex; flex-direction: column; gap: 12px; }
.footer-grid a { color: var(--text-muted); font-size: 14.5px; }
.footer-grid a:hover { color: var(--cyan-bright); }
.footer-logo img { height: 48px; margin-bottom: 16px; }
.footer-bottom {
  border-top: 1px solid var(--border);
  padding-top: 24px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  font-size: 13px; color: var(--text-faint);
}

/* ---------- Admin ---------- */
.admin-body { background: var(--bg); min-height: 100vh; }
.admin-shell { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
.admin-sidebar { background: var(--bg-elevated); border-right: 1px solid var(--border); padding: 28px 20px; }
.admin-sidebar .logo img { height: 30px; margin-bottom: 34px; }
.admin-nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-radius: 10px;
  font-size: 14.5px; font-weight: 600; color: var(--text-muted);
  margin-bottom: 4px;
}
.admin-nav a .ico { width: 18px; height: 18px; }
.admin-nav a:hover { background: var(--bg-card); color: var(--text); }
.admin-nav a.active { background: var(--cyan-dim); color: var(--cyan-bright); }
.admin-main { padding: 36px 40px; }
.admin-topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; }
.admin-topbar h1 { font-size: 24px; margin: 0; }
.admin-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; margin-bottom: 24px; }
.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th { text-align: left; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-faint); padding: 10px 12px; border-bottom: 1px solid var(--border); }
.admin-table td { padding: 12px; border-bottom: 1px solid var(--border); font-size: 14.5px; vertical-align: middle; }
.admin-table tr:last-child td { border-bottom: none; }
.badge { display: inline-block; padding: 4px 10px; border-radius: 100px; font-size: 12px; font-weight: 700; background: var(--cyan-dim); color: var(--cyan-bright); }
.badge.new { background: rgba(95, 212, 138, 0.15); color: #5fd48a; }
.badge.done { background: rgba(255,255,255,0.08); color: var(--text-faint); }
.icon-btn { background: transparent; border: 1px solid var(--border); color: var(--text-muted); border-radius: 8px; padding: 7px 12px; font-size: 13px; cursor: pointer; font-weight: 600; }
.icon-btn:hover { border-color: var(--border-bright); color: var(--text); }
.icon-btn.danger:hover { border-color: rgba(242,114,114,0.5); color: #f27272; }
.login-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.login-card { width: 100%; max-width: 380px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 40px; }
.login-card .logo { display: flex; justify-content: center; margin-bottom: 28px; }
.login-card .logo img { height: 34px; }
.alert { padding: 12px 16px; border-radius: 10px; font-size: 13.5px; margin-bottom: 20px; }
.alert.err { background: rgba(242,114,114,0.1); color: #f27272; border: 1px solid rgba(242,114,114,0.3); }
.alert.ok { background: rgba(95,212,138,0.1); color: #5fd48a; border: 1px solid rgba(95,212,138,0.3); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.admin-actions { display: flex; gap: 8px; }
.model-price-row { display: grid; grid-template-columns: 1.6fr 1fr 1fr auto; gap: 10px; margin-bottom: 10px; align-items: center; }
.model-price-row input { margin: 0; }
.model-price-row .model-price-remove { padding: 9px 13px; line-height: 1; }
@media (max-width: 620px) {
  .model-price-row { grid-template-columns: 1fr 1fr auto; }
  .model-price-row input:first-child { grid-column: 1 / -1; }
}

/* ---------- Cookie notice ---------- */
.cookie-notice {
  position: fixed;
  left: 22px; right: 22px; bottom: 22px;
  z-index: 160;
  max-width: 760px;
  margin: 0 auto;
  display: flex; align-items: center; gap: 22px;
  padding: 18px 22px;
  background: rgba(15, 21, 35, 0.97);
  border: 1px solid var(--border-bright);
  border-radius: var(--radius);
  box-shadow: 0 20px 50px rgba(0,0,0,0.6);
  backdrop-filter: blur(10px);
}
.cookie-notice[hidden] { display: none; }
.cookie-notice p { margin: 0; font-size: 13.5px; line-height: 1.55; }
.cookie-notice a { color: var(--cyan-bright); text-decoration: underline; }
.cookie-notice .btn { flex-shrink: 0; padding: 12px 26px; font-size: 14px; }
@media (max-width: 620px) {
  .cookie-notice { left: 12px; right: 12px; bottom: 12px; flex-direction: column; align-items: stretch; gap: 14px; padding: 16px 18px; }
  .cookie-notice p { font-size: 13px; }
  /* Чтобы плавающая кнопка связи не перекрывала уведомление */
  .cookie-notice:not([hidden]) ~ .contact-fab { bottom: 150px; }
}

/* ---------- Floating contact widget ---------- */
.contact-fab {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 150;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}
.contact-fab-menu {
  display: flex;
  flex-direction: column;
  gap: 10px;
  opacity: 0;
  transform: translateY(10px) scale(0.96);
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.contact-fab.open .contact-fab-menu { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.contact-fab-item {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px 12px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 100px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  white-space: nowrap;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.contact-fab-item:hover { border-color: var(--border-bright); background: var(--bg-card-hover); transform: translateX(-2px); }
.contact-fab-item .ico { width: 20px; height: 20px; color: var(--cyan-bright); flex-shrink: 0; }
.contact-fab-btn {
  position: relative;
  width: 58px; height: 58px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--cyan-bright), var(--cyan) 70%);
  color: #04101a;
  box-shadow: 0 12px 30px rgba(26, 163, 217, 0.45);
  transition: transform 0.25s cubic-bezier(.25,.8,.25,1), box-shadow 0.25s ease;
}
.contact-fab-btn .ico { width: 26px; height: 26px; position: absolute; transition: transform 0.25s ease, opacity 0.2s ease; }
.contact-fab-btn:hover { transform: scale(1.06); box-shadow: 0 16px 36px rgba(26, 163, 217, 0.6); }
.contact-fab-btn .ico-close { opacity: 0; transform: rotate(-45deg) scale(0.5); }
.contact-fab.open .contact-fab-btn .ico-chat { opacity: 0; transform: rotate(45deg) scale(0.5); }
.contact-fab.open .contact-fab-btn .ico-close { opacity: 1; transform: rotate(0deg) scale(1); }
@media (max-width: 620px) {
  .contact-fab { right: 16px; bottom: 16px; }
  .contact-fab-item span:not(.ico) { display: none; }
  .contact-fab-item {
    width: 48px; height: 48px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
  }
  .contact-fab-item .ico { flex-shrink: 0; }
}

/* ---------- Responsive ---------- */
/* Header nav collapses to the burger earlier than the layout breakpoints below —
   logo + 6 links + phone + CTA need ~1213px measured in the browser, so give it
   real headroom instead of guessing again (this broke twice already at 980px
   and 1140px when the nav grew). */
@media (max-width: 1320px) {
  .nav-links { display: none; }
  .burger { display: flex; }
}
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { height: 300px; order: -1; }
  .fold-photo { left: 14%; width: 190px; }
  .flip-photo { right: 14%; width: 220px; }
  .services-grid, .news-grid, .reviews-grid { grid-template-columns: repeat(2, 1fr); }
  .showcase-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
  .contacts-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .admin-shell { grid-template-columns: 1fr; }
  .admin-sidebar { display: none; }
}
@media (max-width: 620px) {
  .hero-visual { height: 320px; }
  .fold-photo { left: 1%; width: 165px; }
  .flip-photo { right: 1%; width: 175px; }
  .services-grid, .news-grid, .reviews-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .section { padding: 64px 0; }
  .cta-band { padding: 36px 26px; flex-direction: column; text-align: center; }
  .cta-band h2 { font-size: 23px; }
  .grid-2 { grid-template-columns: 1fr; }
  .header-phone { display: none; }
  /* Три колонки прайса не помещаются в ширину телефона — раскладываем строку
     в две: сверху название работы, снизу выбор модели и цена. */
  .price-table tr { display: grid; grid-template-columns: 1fr auto; gap: 10px 12px; padding: 15px 0; }
  .price-table td { padding: 0; }
  .price-table .col-work { grid-column: 1 / -1; }
  .price-table .col-model { width: auto; }
  .price-table .price { align-self: center; }
}
@media (max-width: 600px) {
  /* The full wordmark+tagline logo (≈200px wide) plus the CTA button plus the
     burger needs ~510px to fit in one row — that's wider than almost every phone
     in portrait (iPhone Pro Max included, at 430px), so swap to the compact mark
     and shrink the button here rather than at some narrower "should be enough"
     guess that still broke on real devices. */
  .logo-full { display: none; }
  .logo-mark { display: block; height: 32px; width: auto; }
  .header-actions { gap: 8px; }
  .header-actions .btn-primary { padding: 10px 16px; font-size: 13px; }
  .burger { width: 36px; height: 36px; flex-shrink: 0; }
}
@media (max-width: 460px) {
  /* On narrow, tall phone screens (Fold cover display, iPhones in portrait)
     the CTA button next to the logo still feels tight — it's already reachable
     from the burger menu, so drop it here and center the logo instead of
     squeezing everything into a left-aligned row. */
  .site-header .wrap { position: relative; justify-content: flex-end; }
  .logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
  .header-actions .btn-primary { display: none; }
}