/* ===== SELF-HOSTED LOGO/HEADLINE FONT (no FOUT jerk, branded) ===== */
@font-face {
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url(fonts/bebas-neue-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url(fonts/bebas-neue-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    --sun: #FFB800;
    --sun-bright: #FFD600;
    --solar: #FF6B00;
    --dark: #0A0E1A;
    --dark2: #111827;
    --dark3: #1C2333;
    --text: #E8EDF5;
    --muted: #8B97B0;
    --accent: #00D4FF;
    --green: #22C55E;
  }

  *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
  html { overflow-x: hidden; }

  html { scroll-behavior: smooth; }

  body {
    font-family: 'Manrope', sans-serif;
    background: var(--dark);
    color: var(--text);
    overflow-x: hidden;
  }

  /* ===== ANIMATED BG ===== */
  .bg-grid {
    position: fixed;
    inset: 0;
    background-image:
      linear-gradient(rgba(255,184,0,0.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,184,0,0.04) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
    z-index: 0;
  }

  /* ===== NAV ===== */
  nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    padding: 20px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(10,14,26,0.85);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255,184,0,0.12);
  }

  .logo {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 28px;
    letter-spacing: 2px;
    background: linear-gradient(135deg, var(--sun), var(--solar));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .logo span { color: var(--accent); -webkit-text-fill-color: var(--accent); }

  nav a {
    color: var(--muted);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: color 0.2s;
  }
  nav a:hover { color: var(--sun); }

  .nav-links { display: flex; align-items: center; gap: 32px; }

  .nav-cta {
    background: linear-gradient(135deg, var(--sun), var(--solar));
    color: var(--dark) !important;
    font-weight: 700 !important;
    padding: 10px 24px;
    border-radius: 8px;
    transition: transform 0.2s, box-shadow 0.2s !important;
  }
  .nav-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(255,184,0,0.4);
  }

  /* Instagram in the header, icon only, so the profile is visible without
     scrolling to the footer. nav is justify-content: space-between, which
     would otherwise strand this icon in the middle of the bar; margin-left:auto
     eats that free space and keeps it grouped with the links on the right. */
  .nav-ig {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; flex-shrink: 0;
    margin-left: auto; margin-right: 26px;
    border-radius: 10px;
    color: var(--muted);
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.04);
    transition: color 0.2s, border-color 0.2s, background 0.2s;
  }
  .nav-ig:hover {
    color: var(--sun);
    border-color: rgba(255,184,0,0.45);
    background: rgba(255,184,0,0.08);
  }
  .nav-ig:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

  /* ===== HERO ===== */
  .hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 120px 40px 80px;
    overflow: hidden;
    z-index: 1;
    box-sizing: border-box;
    width: 100%;
  }

  .hero-glow {
    position: absolute;
    width: 700px; height: 700px;
    background: radial-gradient(circle, rgba(255,184,0,0.15) 0%, transparent 70%);
    top: -100px; right: -100px;
    pointer-events: none;
    animation: pulse 4s ease-in-out infinite;
  }

  .hero-glow2 {
    position: absolute;
    width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(0,212,255,0.08) 0%, transparent 70%);
    bottom: 0; left: -100px;
    pointer-events: none;
  }

  @keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.1); opacity: 1; }
  }

  .hero-content {
    max-width: 700px;
    width: 100%;
    overflow: visible;
    animation: fadeUp 0.8s ease both;
  }

  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,184,0,0.12);
    border: 1px solid rgba(255,184,0,0.3);
    padding: 8px 16px;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 600;
    color: var(--sun);
    margin-bottom: 28px;
    letter-spacing: 0.5px;
  }

  .hero-badge::before {
    content: '';
    width: 8px; height: 8px;
    background: var(--sun);
    border-radius: 50%;
    animation: blink 1.5s ease-in-out infinite;
  }

  @keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
  }

  h1 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(36px, 10vw, 96px);
    line-height: 0.95;
    letter-spacing: 1px;
    margin-bottom: 24px;
    padding-right: 4px;
  }

  h1 .line1 { color: var(--text); display: block; }
  h1 .line2 {
    display: block;
    background: linear-gradient(135deg, var(--sun), var(--solar));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  h1 .line3 { color: var(--accent); display: block; }

  .hero-sub {
    font-size: 18px;
    color: var(--muted);
    line-height: 1.7;
    margin-bottom: 40px;
    font-weight: 400;
    max-width: 560px;
  }

  .hero-sub strong { color: var(--text); font-weight: 600; }

  .hero-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 60px;
  }

  .btn-primary {
    background: linear-gradient(135deg, var(--sun), var(--solar));
    color: var(--dark);
    font-weight: 800;
    font-size: 16px;
    padding: 16px 36px;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: transform 0.2s, box-shadow 0.2s;
    font-family: 'Manrope', sans-serif;
  }

  .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(255,107,0,0.5);
  }

  .btn-secondary {
    background: transparent;
    color: var(--text);
    font-weight: 600;
    font-size: 16px;
    padding: 16px 36px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.15);
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
    font-family: 'Manrope', sans-serif;
  }

  .btn-secondary:hover {
    border-color: var(--sun);
    color: var(--sun);
  }

  .hero-stats {
    display: flex;
    gap: 48px;
    flex-wrap: wrap;
  }

  .stat { }
  .stat-num {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 42px;
    color: var(--sun);
    letter-spacing: 1px;
    line-height: 1;
  }
  .stat-label {
    font-size: 13px;
    color: var(--muted);
    font-weight: 500;
    margin-top: 4px;
  }

  /* ===== SOLAR VISUAL ===== */
  .hero-visual {
    position: absolute;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
    width: 480px;
    height: 480px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .sun-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(255,184,0,0.2);
    animation: rotate 20s linear infinite;
  }

  .sun-ring:nth-child(1) { width: 480px; height: 480px; animation-duration: 30s; }
  .sun-ring:nth-child(2) { width: 360px; height: 360px; animation-duration: 20s; animation-direction: reverse; border-color: rgba(0,212,255,0.15); }
  .sun-ring:nth-child(3) { width: 240px; height: 240px; animation-duration: 15s; border-color: rgba(255,107,0,0.2); }

  @keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }

  .sun-core {
    width: 140px; height: 140px;
    background: radial-gradient(circle, var(--sun-bright), var(--solar));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 64px;
    box-shadow: 0 0 60px rgba(255,184,0,0.6), 0 0 120px rgba(255,184,0,0.3);
    animation: glow 3s ease-in-out infinite;
    position: relative;
    z-index: 2;
  }

  @keyframes glow {
    0%, 100% { box-shadow: 0 0 60px rgba(255,184,0,0.6), 0 0 120px rgba(255,184,0,0.3); }
    50% { box-shadow: 0 0 80px rgba(255,184,0,0.9), 0 0 160px rgba(255,184,0,0.5); }
  }

  .sun-dot {
    position: absolute;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--accent);
  }

  .sun-ring:nth-child(1) .sun-dot { top: 10px; left: 50%; transform: translateX(-50%); }
  .sun-ring:nth-child(2) .sun-dot { top: 10px; left: 50%; transform: translateX(-50%); background: var(--sun); }

  /* ===== SECTION ===== */
  section {
    position: relative;
    z-index: 1;
    padding: 100px 40px;
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
    width: 100%;
  }

  .section-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--sun);
    margin-bottom: 16px;
  }

  h2 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(40px, 5vw, 64px);
    line-height: 1;
    letter-spacing: 1px;
    margin-bottom: 16px;
  }

  .section-sub {
    font-size: 17px;
    color: var(--muted);
    max-width: 560px;
    line-height: 1.7;
    margin-bottom: 60px;
  }

  /* ===== SERVICES ===== */
  .services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
  }

  .service-card {
    background: var(--dark3);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px;
    padding: 32px;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
  }

  .service-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,184,0,0.05), transparent);
    opacity: 0;
    transition: opacity 0.3s;
  }

  .service-card:hover {
    border-color: rgba(255,184,0,0.3);
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
  }

  .service-card:hover::before { opacity: 1; }

  .service-icon {
    width: 56px; height: 56px;
    background: rgba(255,184,0,0.12);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    margin-bottom: 20px;
  }

  .service-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--text);
  }

  .service-desc {
    font-size: 14px;
    color: var(--muted);
    line-height: 1.7;
  }

  /* ===== WHY ===== */
  .why-section {
    background: var(--dark2);
    margin: 0;
    max-width: 100%;
    padding: 100px 40px;
  }

  .why-inner {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
  }

  .why-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
  }

  .why-points { display: flex; flex-direction: column; gap: 24px; }

  .why-point {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 20px;
    background: var(--dark3);
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.05);
    transition: border-color 0.2s;
  }

  .why-point:hover { border-color: rgba(255,184,0,0.3); }

  .why-icon {
    width: 44px; height: 44px;
    min-width: 44px;
    background: linear-gradient(135deg, var(--sun), var(--solar));
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
  }

  .why-title { font-weight: 700; font-size: 16px; margin-bottom: 6px; }
  .why-text { font-size: 14px; color: var(--muted); line-height: 1.6; }

  .why-image-box {
    background: var(--dark3);
    border-radius: 20px;
    border: 1px solid rgba(255,184,0,0.15);
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .big-stat {
    text-align: center;
    padding: 32px;
    background: linear-gradient(135deg, rgba(255,184,0,0.1), rgba(255,107,0,0.1));
    border-radius: 16px;
    border: 1px solid rgba(255,184,0,0.2);
  }

  .big-stat-num {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 72px;
    color: var(--sun);
    line-height: 1;
  }

  .big-stat-label { color: var(--muted); font-size: 14px; margin-top: 8px; }

  .mini-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

  .mini-stat {
    background: var(--dark2);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
  }

  .mini-stat-num {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 36px;
    color: var(--accent);
    line-height: 1;
  }

  .mini-stat-label { font-size: 12px; color: var(--muted); margin-top: 4px; }

  /* ===== PROCESS ===== */
  .process-steps {
    display: flex;
    gap: 0;
    position: relative;
  }

  .process-steps::before {
    content: '';
    position: absolute;
    top: 28px;
    left: 28px;
    right: 28px;
    height: 2px;
    background: linear-gradient(90deg, var(--sun), var(--solar), var(--accent));
    opacity: 0.3;
  }

  .step {
    flex: 1;
    text-align: center;
    padding: 0 16px;
    position: relative;
  }

  .step-num {
    width: 56px; height: 56px;
    background: linear-gradient(135deg, var(--sun), var(--solar));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 24px;
    color: var(--dark);
    margin: 0 auto 20px;
    position: relative;
    z-index: 1;
    box-shadow: 0 0 24px rgba(255,184,0,0.4);
  }

  .step-title { font-weight: 700; font-size: 15px; margin-bottom: 8px; }
  .step-desc { font-size: 13px; color: var(--muted); line-height: 1.5; }

  /* ===== FORM ===== */
  .form-section {
    background: linear-gradient(135deg, var(--dark2), var(--dark3));
    margin: 0;
    max-width: 100%;
    padding: 100px 40px;
    position: relative;
    overflow: hidden;
  }

  .form-glow {
    position: absolute;
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(255,184,0,0.08), transparent 70%);
    top: -200px; right: -100px;
    pointer-events: none;
  }

  .form-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
  }

  .form-text h2 { margin-bottom: 16px; }

  .guarantee-badges {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 40px;
  }

  .badge-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: var(--muted);
  }

  .badge-icon {
    width: 32px; height: 32px;
    background: rgba(34,197,94,0.15);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
  }

  .form-box {
    background: var(--dark);
    border: 1px solid rgba(255,184,0,0.2);
    border-radius: 20px;
    padding: 40px;
  }

  .form-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 8px;
  }

  .form-subtitle {
    font-size: 14px;
    color: var(--muted);
    margin-bottom: 28px;
  }

  .form-group { margin-bottom: 16px; }

  .form-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
    margin-bottom: 8px;
    letter-spacing: 0.5px;
  }

  .form-group input,
  .form-group select,
  .form-group textarea {
    width: 100%;
    background: var(--dark2);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 14px 16px;
    font-size: 15px;
    color: var(--text);
    font-family: 'Manrope', sans-serif;
    outline: none;
    transition: border-color 0.2s;
  }

  .form-group input:focus,
  .form-group select:focus,
  .form-group textarea:focus {
    border-color: var(--sun);
  }

  .form-group select option { background: var(--dark2); }

  .form-group textarea { resize: vertical; min-height: 90px; }

  .submit-btn {
    width: 100%;
    background: linear-gradient(135deg, var(--sun), var(--solar));
    color: var(--dark);
    font-weight: 800;
    font-size: 17px;
    padding: 18px;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    font-family: 'Manrope', sans-serif;
    transition: transform 0.2s, box-shadow 0.2s;
    margin-top: 8px;
  }

  .submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(255,107,0,0.5);
  }

  .privacy-note {
    font-size: 12px;
    color: var(--muted);
    text-align: center;
    margin-top: 12px;
  }

  /* ===== SUCCESS ===== */
  .success-msg {
    display: none;
    text-align: center;
    padding: 40px 20px;
  }

  .success-msg .check {
    font-size: 56px;
    margin-bottom: 16px;
    display: block;
  }

  .success-msg h3 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--green);
  }

  .success-msg p { color: var(--muted); font-size: 15px; }

  /* ===== FOOTER ===== */
  footer {
    background: var(--dark);
    border-top: 1px solid rgba(255,255,255,0.06);
    padding: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    position: relative;
    z-index: 1;
  }

  footer p { font-size: 13px; color: var(--muted); }

  .footer-contacts { display: flex; gap: 24px; }

  .footer-contacts a {
    font-size: 14px;
    color: var(--muted);
    text-decoration: none;
    transition: color 0.2s;
  }
  .footer-contacts a:hover { color: var(--sun); }

  /* ===== RESPONSIVE ===== */
  @media (max-width: 900px) {
    nav { padding: 14px 16px; }
    .nav-links { display: none; }
    .hero { padding: 90px 16px 50px; min-height: auto; }
    .hero-visual { display: none; }
    section { padding: 60px 16px 60px 16px; }
    .why-grid, .form-inner { grid-template-columns: 1fr; gap: 40px; }
    .process-steps { flex-direction: column; gap: 32px; }
    .process-steps::before { display: none; }
    .why-section { padding: 60px 16px 60px 16px; }
    .form-section { padding: 60px 16px 60px 16px; }
    .why-inner { padding: 0; }
    footer { padding: 24px 16px; flex-direction: column; text-align: center; }
    .hero-stats { gap: 24px; }
  }

  @media (max-width: 600px) {
    nav { padding: 12px 16px; }
    .logo { font-size: 22px; }
    .nav-cta { padding: 8px 16px; font-size: 13px !important; }
    .hero { padding: 80px 20px 40px 16px; min-height: 100svh; }
    h1 { font-size: clamp(28px, 9vw, 48px) !important; line-height: 1; }
    .hero-badge { font-size: 11px; padding: 6px 12px; margin-bottom: 20px; }
    .hero-sub { font-size: 15px; margin-bottom: 28px; }
    .hero-stats { gap: 20px; flex-wrap: wrap; }
    .stat-num { font-size: 32px; }
    .stat-label { font-size: 12px; }
    .hero-actions { flex-direction: column; gap: 10px; }
    .btn-primary, .btn-secondary { width: 100%; text-align: center; justify-content: center; padding: 14px 20px; font-size: 15px; }
    .services-grid { grid-template-columns: 1fr; }
    .mini-stats { grid-template-columns: 1fr 1fr; }
    .form-box { padding: 24px 16px; }
    .footer-contacts { flex-direction: column; gap: 8px; }
  }

/* ===================================================== */
/* ===== MULTIPAGE ADDITIONS (shared by all pages) ===== */
/* ===================================================== */

a.logo { text-decoration: none; display: inline-block; }

/* ----- NAV dropdown ----- */
.nav-links > a,
.nav-dropdown-toggle { line-height: 1; }
.nav-dropdown { position: relative; display: flex; align-items: center; }
.nav-dropdown-toggle { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 12px;
  background: rgba(17,24,39,0.98);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255,184,0,0.15);
  border-radius: 12px;
  padding: 10px;
  min-width: 290px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease;
  z-index: 200;
}
/* invisible bridge across the gap so :hover is not lost moving to the menu */
.nav-dropdown-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -18px;
  height: 18px;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
}
.nav-dropdown-menu a {
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 14px;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.nav-dropdown-menu a:hover { background: rgba(255,184,0,0.1); color: var(--sun); }

/* ----- clickable service cards (visually identical) ----- */
a.service-card { text-decoration: none; color: inherit; display: block; }

/* ----- PAGE HERO ----- */
.page-hero {
  position: relative;
  z-index: 1;
  padding: 150px 40px 50px;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}
.breadcrumbs {
  font-size: 13px;
  margin-bottom: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.breadcrumbs a { color: var(--muted); text-decoration: none; transition: color 0.2s; }
.breadcrumbs a:hover { color: var(--sun); }
.breadcrumbs .sep { color: rgba(139,151,176,0.5); }
.breadcrumbs .current { color: var(--sun); }
.page-hero h1 { font-size: clamp(32px, 6vw, 64px); margin-bottom: 20px; }
.page-hero .lead {
  font-size: 18px;
  color: var(--muted);
  line-height: 1.7;
  max-width: 760px;
}
.page-hero .lead strong { color: var(--text); }
.page-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 32px; }

/* ----- PROSE / ARTICLE ----- */
.prose {
  position: relative;
  z-index: 1;
  max-width: 860px;
  margin: 0 auto;
  padding: 30px 40px 70px;
  width: 100%;
  box-sizing: border-box;
}
.prose h2 { font-size: clamp(26px, 4vw, 42px); margin: 50px 0 16px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 {
  font-family: 'Manrope', sans-serif;
  font-size: 19px;
  font-weight: 700;
  color: var(--text);
  margin: 30px 0 12px;
}
.prose p { font-size: 16px; color: var(--muted); line-height: 1.8; margin-bottom: 18px; }
.prose p strong { color: var(--text); }
.prose ul, .prose ol {
  margin: 0 0 22px 22px;
  color: var(--muted);
  line-height: 1.8;
  font-size: 16px;
}
.prose li { margin-bottom: 8px; }
.prose li::marker { color: var(--sun); }
.prose a { color: var(--accent); text-decoration: none; }
.prose a:hover { text-decoration: underline; }

/* ----- CONTENT IMAGES ----- */
.img-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin: 26px 0 30px;
}
.content-figure { margin: 26px 0 30px; }
.content-figure img,
.prose img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  background: var(--dark3);
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.content-figure figcaption {
  font-size: 13px;
  color: var(--muted);
  margin-top: 10px;
  text-align: center;
}

/* ----- RELATED ----- */
.related-section {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 40px 100px;
  width: 100%;
  box-sizing: border-box;
}

/* ----- FOOTER (multi-column, all pages) ----- */
footer { display: block; padding: 56px 40px 28px; }
.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 40px;
}
.footer-col { display: flex; flex-direction: column; gap: 10px; }
.footer-col-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--sun);
  margin-bottom: 6px;
}
.footer-col a { font-size: 14px; color: var(--muted); text-decoration: none; transition: color 0.2s; }
.footer-col a:hover { color: var(--sun); }
.footer-tagline { font-size: 14px; color: var(--muted); line-height: 1.6; max-width: 340px; }
.footer-bottom {
  max-width: 1200px;
  margin: 32px auto 0;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.06);
  text-align: center;
}
.footer-bottom p { font-size: 13px; color: var(--muted); }
.footer-contacts { flex-direction: column; gap: 8px; }

@media (max-width: 900px) {
  .footer-inner { grid-template-columns: 1fr; gap: 32px; }
  .page-hero { padding: 116px 16px 36px; }
  .prose { padding: 16px 16px 56px; }
  .related-section { padding: 8px 16px 60px; }
  footer { padding: 40px 16px 24px; }
}

/* ===================================================== */
/* ===== SMOOTHER PAGE-TO-PAGE NAVIGATION ============== */
/* ===================================================== */

/* 1) Kill the white flash between page loads (all browsers):
      paint the root canvas dark before <body> renders. */
html { background: #0A0E1A; }

/* 2) Cross-document fade between pages — progressive enhancement.
      Works in browsers that support MPA View Transitions
      (Chromium 126+); silently ignored everywhere else. */
@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.30s;
  animation-timing-function: ease;
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none !important; }
}

/* 3) Stop the fixed header from jerking between pages.
      a) Reserve scrollbar space so pages of different length
         don't shift the fixed nav horizontally. */
html { scrollbar-gutter: stable; }

/*    b) Treat the top nav as ONE continuous element across
         navigations, so it stays put instead of cross-fading
         with the page body (View Transitions, Chromium 126+). */
header[role="banner"] nav { view-transition-name: site-header; }

@media (prefers-reduced-motion: reduce) {
  header[role="banner"] nav { view-transition-name: none; }
}

/* ===== SPEC / COMPARISON TABLES ===== */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 28px 0; border-radius: 12px; border: 1px solid rgba(255,255,255,0.09); }
.spec-table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 620px; background: var(--dark3); }
.spec-table caption { caption-side: top; text-align: left; padding: 16px 20px 12px; font-weight: 700; font-size: 15px; color: var(--text); }
.spec-table th, .spec-table td { padding: 14px 20px; text-align: left; vertical-align: top; border-bottom: 1px solid rgba(255,255,255,0.07); line-height: 1.6; }
.spec-table thead th { font-weight: 700; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sun); background: rgba(0,0,0,0.22); white-space: nowrap; }
.spec-table tbody th { font-weight: 600; color: var(--text); width: 26%; }
.spec-table td { color: var(--muted); }
.spec-table tbody tr:last-child th, .spec-table tbody tr:last-child td { border-bottom: none; }
@media (max-width: 640px) { .spec-table { font-size: 14px; } .spec-table th, .spec-table td { padding: 12px 14px; } }

/* ===== CROSS-SITE (один бізнес, два напрями) ===== */
.footer-sibling { font-size: 13px; color: var(--muted); line-height: 1.6; margin-bottom: 10px; }
.footer-sibling strong { color: var(--text); font-weight: 600; }
.footer-sibling a { color: var(--accent); text-decoration: none; border-bottom: 1px solid rgba(0,212,255,0.35); }
.footer-sibling a:hover { border-bottom-color: var(--accent); }

/* ===== REAL PHOTOGRAPHS =====
   .prose img is locked to 16/9 + object-fit:cover for the SVG illustrations.
   Photographs have their own aspect ratios and must not be cropped, so mark
   them up as <picture class="photo"> and let the intrinsic ratio through. */
.prose picture { display: block; }
.prose picture.photo img {
  aspect-ratio: auto;
  object-fit: contain;
}
.prose figure { margin: 28px 0; }
.prose figcaption {
  margin-top: 10px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
  text-align: center;
}

/* Links inside spec tables. The site has no global `a` rule — links are
   styled per context — so links placed outside .prose fell back to the
   browser defaults (#0000EE / visited #551A8B), which measure 1.8:1 and
   1.6:1 against the dark table background, far below the 4.5:1 minimum.
   --accent gives 9.7:1. :visited is pinned so it never turns purple. */
.spec-table a,
.spec-table a:visited {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 212, 255, 0.32);
}
.spec-table a:hover,
.spec-table a:focus-visible {
  border-bottom-color: var(--accent);
}

/* Portrait photographs would otherwise run ~1040px tall in the 780px prose
   column. Cap the width so they stay a comfortable height and stay centred. */
.prose picture.photo.portrait img {
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

/* A photograph that opens full size in a new tab. The link is the image, so it
   must be a block (an inline <a> would leave a descender gap under the frame)
   and must not inherit the .prose text underline on hover. */
.prose a.photo-link {
  display: block;
  border-radius: 14px;
  text-decoration: none;
}
.prose a.photo-link:hover { text-decoration: none; }
.prose a.photo-link img { transition: border-color 0.2s ease; }
.prose a.photo-link:hover img { border-color: rgba(255,255,255,0.22); }
.prose a.photo-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
  .prose a.photo-link img { transition: none; }
}

/* Two certificates side by side. They drop to one column with the rest of the
   grids in the phone block below. */
.prose .cert-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin: 28px 0;
}
.prose .cert-pair figure { margin: 0; }

/* Photographs from site. A fixed 3/4 portrait crop keeps the grid even however
   the phone was held; the full frame is one click away. These are NOT marked
   .photo -- that class exists to let a photo keep its own ratio, which is the
   opposite of what a gallery wants. */
.prose .work-gallery {
  display: grid;
  /* 300px floors it at two columns in the 780px prose measure -- four frames
     make a clean 2x2 rather than a row of three and an orphan -- and one
     column once the viewport drops below ~620px. */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin: 28px 0;
}
.prose .work-gallery figure { margin: 0; }
.prose .work-gallery img {
  aspect-ratio: 3 / 4;
  object-fit: cover;
  width: 100%;
}
.prose .work-gallery figcaption {
  text-align: left;
  font-size: 13px;
  margin-top: 8px;
}
@media (max-width: 640px) {
  .prose .cert-pair { grid-template-columns: 1fr; }
}

/* ===================================================== */
/* ===== PHONES ======================================== */
/* ===================================================== */
/* Checked at the six most common phone viewports in Ukraine
   (StatCounter, Aug 2026): 414x896, 393x873, 390x844, 360x800, 384x832, 375x812.
   Rules: pictures are always shown whole, and nothing scrolls sideways. */

/* header controls are in every page's markup but only appear on narrow screens */
.nav-call, .nav-toggle { display: none; }

/* The bare `nav { position: fixed; ... }` header rule also caught nav.breadcrumbs on the eight
   inner pages: the breadcrumb bar was fixed at the top of the screen, hidden behind the header
   on desktop and sticking out below it, over the article text, on phones. Put it back in the page. */
nav.breadcrumbs {
  position: static; top: auto; left: auto; right: auto; z-index: auto;
  padding: 0; background: none; border: 0;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  justify-content: flex-start;
}

/* never force a table wider than the screen; phones get one card per row (below) */
.spec-table { min-width: 0; }

/* photographs are never wider or taller than the screen, so they can be seen whole.
   The portrait selector is repeated because the earlier 520px portrait cap is more specific
   and on its own made portrait photos 520px wide on a 414px phone. */
.prose picture.photo img,
.prose picture.photo.portrait img { width: auto; max-width: 100%; max-height: 80vh; margin-left: auto; margin-right: auto; }
.prose picture.photo.portrait img { max-width: min(520px, 100%); }

@media (max-width: 900px) {
  /* header: logo, call button and menu toggle */
  nav { gap: 10px; padding: 10px 16px; }
  nav .logo { margin-right: auto; }
  .nav-call {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 44px; padding: 0 14px; border-radius: 10px;
    background: linear-gradient(135deg, var(--sun), var(--solar));
    color: var(--dark) !important; font-size: 14px; font-weight: 700; white-space: nowrap;
  }
  .nav-call svg, .nav-call, .nav-toggle { flex-shrink: 0; }
  /* the auto margin above is a desktop trick; on phones the logo already
     pushes everything right, so reset it and match the 44px touch targets */
  .nav-ig { margin-left: 0; margin-right: 0; width: 44px; height: 44px; }
  .nav-ig svg, .nav-ig { flex-shrink: 0; }
  nav .logo { min-width: 0; overflow: hidden; }
  .nav-toggle {
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 0; cursor: pointer;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.14); border-radius: 10px;
  }
  .nav-toggle-bar { display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--text); transition: transform 0.2s, opacity 0.2s; }
  nav.nav-open .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  nav.nav-open .nav-toggle-bar:nth-child(2) { opacity: 0; }
  nav.nav-open .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* the menu opens as a panel under the header */
  nav.nav-open .nav-links {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: absolute; top: 100%; left: 0; right: 0;
    max-height: calc(100vh - 64px); overflow-y: auto;
    padding: 6px 16px 14px;
    background: #0A0E1A; /* solid: the page must not show through the open menu */
    border-bottom: 1px solid rgba(255,184,0,0.12);
    box-shadow: 0 18px 36px rgba(0,0,0,0.5);
  }
  nav.nav-open .nav-links > a,
  nav.nav-open .nav-dropdown-toggle {
    display: flex; align-items: center; min-height: 48px;
    font-size: 16px; color: var(--text);
    border-bottom: 1px solid rgba(255,255,255,0.07);
  }
  nav.nav-open .nav-dropdown { display: block; }
  nav.nav-open .nav-dropdown-menu {
    position: static; transform: none; opacity: 1; visibility: visible;
    margin: 0; padding: 4px 0 8px 12px; min-width: 0;
    background: none; border: 0; border-radius: 0; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  nav.nav-open .nav-dropdown-menu::before { display: none; }
  nav.nav-open .nav-dropdown-menu a { display: flex; align-items: center; min-height: 44px; padding: 6px 10px; font-size: 15px; white-space: normal; }
  nav.nav-open .nav-links .nav-cta { display: none; } /* the header call button is always visible */

  /* the FAQ sections carry desktop-sized inline padding */
  section#faq { padding: 56px 16px !important; }
  section#faq summary { min-height: 44px; }

  /* comfortable tap targets in the footer and breadcrumbs */
  .footer-col { gap: 0; }
  .footer-col-title { margin-bottom: 4px; }
  .footer-col a, .footer-contacts a { display: block; padding: 11px 0; }
  .breadcrumbs a { display: inline-block; padding: 8px 0; }
}

@media (max-width: 600px) {
  h2 { font-size: clamp(28px, 8.2vw, 40px); line-height: 1.08; }
  .page-hero h1 { font-size: clamp(26px, 7.6vw, 40px) !important; line-height: 1.08; }
  .prose h2 { font-size: clamp(22px, 6.4vw, 30px); line-height: 1.15; }
  h1, h2, h3 { overflow-wrap: break-word; }
  .hero-badge { font-size: 12px; }
  section#faq details { padding: 16px 18px !important; }
  /* three stats in one row instead of wrapping 2 + 1 */
  .hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .stat-num { font-size: 30px; }
}

@media (max-width: 640px) {
  /* tables with a header row: one card per row, each value labelled */
  .spec-table--stack, .spec-table--stack tbody, .spec-table--stack tr,
  .spec-table--stack td { display: block; width: 100%; box-sizing: border-box; }
  .spec-table--stack caption { display: block; }
  .spec-table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .spec-table--stack tbody tr { padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,0.07); }
  .spec-table--stack tbody tr:last-child { border-bottom: 0; }
  .spec-table--stack tbody th { display: block; width: auto; padding: 0 0 6px; border: 0; font-size: 16px; }
  .spec-table--stack tbody td { padding: 6px 0 0; border: 0; }
  .spec-table--stack td::before {
    content: attr(data-label); display: block; margin-bottom: 2px;
    font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sun);
  }
}

@media (max-width: 420px) {
  .nav-call { width: 44px; padding: 0; justify-content: center; }
  .nav-call-text { display: none; }
}

/* ===== HERO: topographic survey animation (assets/topo.js) ===== */
.hero .hero-content { max-width: min(700px, 54vw); position: relative; z-index: 1; }
.hero-visual.topo-visual {
  display: block; width: clamp(400px, 36vw, 560px); height: auto; margin: 0;
  animation: topoFadeIn 1s 0.2s ease both; /* opacity only: a transform here would undo the vertical centring */
}
@keyframes topoFadeIn { from { opacity: 0; } to { opacity: 1; } }
.topo-frame {
  background: #111827; border: 1px solid rgba(255,184,0,0.18); border-radius: 16px; overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.02) inset;
}
.topo-frame canvas { display: block; width: 100%; height: auto; aspect-ratio: 10 / 9; cursor: crosshair; }
.topo-bar {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.topo-live { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(34,197,94,0.15); animation: blink 1.5s ease-in-out infinite; }
.topo-gnss { margin-left: auto; color: var(--muted); font-weight: 600; letter-spacing: 0.04em; }
.topo-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border-top: 1px solid rgba(255,255,255,0.06); }
.topo-stats > div { padding: 9px 12px 10px; min-width: 0; }
.topo-stats > div + div { border-left: 1px solid rgba(255,255,255,0.06); }
.topo-stats dt { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.topo-stats dd { margin: 2px 0 0; font-size: 15px; font-weight: 800; color: var(--sun); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topo-visual figcaption { margin-top: 12px; font-size: 12px; color: var(--muted); text-align: center; letter-spacing: 0.02em; }

/* narrower screens: the animation goes under the text */
@media (max-width: 1099px) {
  .hero { flex-direction: column; align-items: stretch; }
  .hero .hero-content { max-width: 700px; }
  .hero-visual.topo-visual {
    display: block; position: relative; right: auto; top: auto; transform: none;
    width: 100%; max-width: 560px; margin: 36px auto 0;
  }
}
@media (max-width: 600px) {
  .topo-bar { font-size: 11px; padding: 9px 12px; }
  .topo-gnss { font-size: 10px; }
  .topo-stats { grid-template-columns: 0.95fr 1.2fr 0.85fr 1fr; }
  .topo-stats > div { padding: 8px 7px 9px; }
  .topo-stats dt { font-size: 9px; letter-spacing: 0.06em; }
  .topo-stats dd { font-size: 12.5px; }
  .topo-visual figcaption { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-visual.topo-visual, .topo-live { animation: none; }
}

/* ===== SERVICE PAGE HERO WITH AN ANIMATION (topographic-survey.html) ===== */
.page-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) clamp(380px, 42%, 540px); gap: 48px; align-items: center; }
.page-visual { margin: 0; min-width: 0; animation: topoFadeIn 1s 0.2s ease both; }
.topo-frame canvas[data-topo="river"] { aspect-ratio: 4 / 3; }
@media (min-width: 1024px) {
  .page-hero-grid .page-actions { gap: 12px; }
  .page-hero-grid .page-actions a { padding-left: 24px; padding-right: 24px; }
}
@media (max-width: 1023px) {
  .page-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .page-visual { width: 100%; max-width: 560px; margin: 0 auto; }
}
@media (max-width: 600px) {
  .topo-stats.topo-stats--river { grid-template-columns: 0.75fr 1fr 1.1fr 1.2fr; }
  .topo-stats--river dd { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .page-visual { animation: none; }
}

/* ===================================================================================================================
   Бюро інженерних вишукувань — additions to the geoprofi-ses stylesheet above (same design system, same tokens)
   =================================================================================================================== */

.logo.logo-buro { font-size: 22px; letter-spacing: 1px; white-space: nowrap; }
h1 .line2 { padding-top: 0.1em; margin-top: -0.1em; }  /* room for the breve of Й inside the gradient text */
h1 .line4 { display: block; font-family: 'Bebas Neue', sans-serif; font-size: clamp(18px, 2.3vw, 32px); color: var(--muted); letter-spacing: 1px; line-height: 1.1; margin-top: 8px; }

/* services menu in three groups */
.nav-dropdown-menu.nav-groups { flex-direction: row; gap: 6px; min-width: 660px; padding: 14px; }
.nav-group { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.nav-group-title { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sun); padding: 6px 12px 4px; }
.nav-group-title.nav-group-out { margin-top: 10px; color: var(--muted); }

/* services page section: groups of cards */
#services .section-sub { margin-bottom: 12px; }
.service-group-title {
  display: flex; align-items: center; gap: 14px; margin: 44px 0 18px;
  font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--text);
}
.service-group-title::after { content: ""; flex: 1; height: 1px; background: rgba(255,184,0,0.15); }
.service-card.service-card-out { border-style: dashed; border-color: rgba(0,212,255,0.25); }

/* FAQ (the geoprofi-ses inline styles as classes) */
section.faq-section { max-width: 860px; }
.faq-list { display: flex; flex-direction: column; gap: 16px; }
.faq-list details { background: var(--dark3); border: 1px solid rgba(255,255,255,0.07); border-radius: 12px; padding: 20px 24px; cursor: pointer; }
.faq-list summary { font-weight: 700; font-size: 16px; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; flex: none; color: var(--sun); font-size: 22px; font-weight: 400; line-height: 1; }
.faq-list details[open] summary::after { content: "−"; }
.faq-list p { margin-top: 14px; color: var(--muted); font-size: 15px; line-height: 1.7; }

/* ===== EXPLAINER SCENE (assets/explainer.js + assets/scene-*.js) in the .topo-frame card =====
   The step strip replaces the stats row: the current step is sun-coloured, a sun line shows progress through it */
.hero-visual.scene-visual { width: clamp(420px, 42vw, 620px); }
.hero h1 { font-size: clamp(34px, 7.4vw, 80px); }
.topo-frame canvas[data-scene] { aspect-ratio: 16 / 10; cursor: default; }
.scene-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid rgba(255,255,255,0.06); }
.scene-steps li { position: relative; min-width: 0; }
.scene-steps li + li { border-left: 1px solid rgba(255,255,255,0.06); }
.scene-steps li::before { content: ""; position: absolute; left: 0; top: -1px; height: 2px; width: calc(var(--p, 0) * 100%); background: linear-gradient(90deg, var(--sun), var(--solar)); }
.scene-steps button { display: block; width: 100%; height: 100%; padding: 9px 10px 10px; text-align: left; background: none; border: 0; color: inherit; font: inherit; cursor: pointer; }
.scene-steps button:hover { background: rgba(255,184,0,0.05); }
.scene-step-n { display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.scene-step-t { display: block; margin-top: 2px; font-size: 13px; font-weight: 800; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scene-steps li.is-current .scene-step-n { color: var(--text); }
.scene-steps li.is-current .scene-step-t { color: var(--sun); }
.scene-caption { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; margin-top: 12px; font-size: 12px; color: var(--muted); text-align: center; }
.scene-toggle {
  background: rgba(255,184,0,0.12); border: 1px solid rgba(255,184,0,0.3); border-radius: 100px; padding: 3px 12px;
  color: var(--sun); font: 700 11px/1.4 'Manrope', sans-serif; letter-spacing: 0.04em; cursor: pointer;
}
.scene-toggle .when-paused, .explainer.is-paused .scene-toggle .when-playing { display: none; }
.explainer.is-paused .scene-toggle .when-paused { display: inline; }
.scene-links a { color: var(--muted); text-decoration: none; transition: color 0.15s; }
.scene-links a:hover, .scene-links a.is-lit { color: var(--sun); }

@media (max-width: 1180px) {
  .logo.logo-buro { font-size: 18px; }
  .nav-links > a[href="/"] { display: none; }
  .nav-links > a, .nav-dropdown-toggle { white-space: nowrap; }
}
@media (max-width: 1099px) {
  .hero-visual.scene-visual { width: 100%; max-width: 720px; }
}
@media (max-width: 900px) {
  .nav-dropdown-menu.nav-groups { flex-direction: column; min-width: 0; }
}
@media (max-width: 600px) {
  .logo.logo-buro { display: flex; flex-direction: column; font-size: 15px; line-height: 1.05; }
  .logo.logo-buro span { font-size: 10px; letter-spacing: 0.5px; }
  .topo-frame canvas[data-scene] { aspect-ratio: 5 / 4; }
  .scene-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scene-steps li:nth-child(3) { border-left: 0; }
  .scene-steps li:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,0.06); }
  .scene-step-t { font-size: 12.5px; }
}
@media (max-width: 520px) {
  .topo-frame .topo-gnss { display: none; }
}
@media (max-width: 340px) {
  /* "Бюро інженерних вишукувань" is the longest logo of the four sites and the
     header now carries four controls. Claw the last few pixels back from the
     padding and gaps rather than shrinking the 44px touch targets. */
  nav { padding-inline: 12px; gap: 8px; }
}

@media (max-width: 560px) {
  .nav-call .nav-call-text { display: none; }
}

/* the row of jobs under the hero scene: the one on screen lights up, each links to its page.
   The site header rule above styles every <nav>, so this one is put back to a plain block first. */
nav.scene-jobs {
  position: static; padding: 0; background: none; border: 0; backdrop-filter: none; z-index: auto;
}
.scene-jobs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 8px; margin-top: 10px; }
.scene-jobs a {
  padding: 4px 10px; border: 1px solid rgba(255,255,255,0.08); border-radius: 100px; background: rgba(255,255,255,0.02);
  color: var(--muted); text-decoration: none; font-size: 12px; font-weight: 600;
  transition: color 0.15s, border-color 0.15s, background-color 0.15s;
}
.scene-jobs a:hover, .scene-jobs a:focus-visible { color: var(--text); border-color: rgba(255,184,0,0.4); }
.scene-jobs a.is-lit { color: var(--dark); background: linear-gradient(135deg, var(--sun), var(--solar)); border-color: transparent; }
@media (max-width: 600px) {
  .scene-jobs { gap: 5px 6px; }
  .scene-jobs a { font-size: 11px; padding: 3px 8px; }
}