/* Brick Tech Krakow — sandbox index editorial layout (dark only) */



:root {

  --sb-transition: all 0.9s cubic-bezier(0.16, 1, 0.3, 1);

  --sb-section-pad: 100px;

}



html { scroll-behavior: smooth; }



.container {

  max-width: 1200px;

  margin: 0 auto;

  padding: 0 24px;

}



/* ── NAV ── */

.sb-nav {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  z-index: 1000;

  padding: 20px 0;

  transition: background 0.25s ease, padding 0.25s ease, border-color 0.25s ease;

}



.sb-nav.scrolled {

  background: rgba(4, 7, 15, 0.92);

  backdrop-filter: blur(14px);

  padding: 12px 0;

  border-bottom: 1px solid var(--line);

}



.sb-nav:not(.scrolled) .sb-brand strong,

.sb-nav:not(.scrolled) .sb-brand span,

.sb-nav:not(.scrolled) .menu-trigger span {

  color: rgba(255, 255, 255, 0.95);

}



.sb-nav-inner {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 16px;

}



.sb-brand {

  display: flex;

  align-items: center;

  gap: 12px;

  text-decoration: none;

  color: inherit;

}



.sb-brand:hover { text-decoration: none; }



.sb-brand strong {

  font-family: 'Syne', sans-serif;

  font-size: 14px;

  display: block;

}



.sb-brand span {

  display: block;

  font-size: 11px;

  color: var(--muted2);

  font-weight: 400;

  line-height: 1.3;

  max-width: 200px;

}



.sb-brand .logo {

  width: 36px;

  height: 36px;

}



.sb-nav-actions {

  display: flex;

  align-items: center;

  gap: 12px;

}



.sb-nav-desktop {

  display: flex;

  align-items: center;

  gap: 14px;

}



.sb-nav-desktop a {

  font-size: 13px;

  color: var(--muted);

  padding: 8px 10px;

  border-radius: 10px;

  text-decoration: none;

}



.sb-nav-desktop a:hover {

  background: rgba(255, 255, 255, 0.06);

  color: var(--text);

  text-decoration: none;

}



.menu-trigger {

  background: none;

  border: none;

  cursor: pointer;

  width: 44px;

  height: 44px;

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

}



.menu-trigger span {

  display: block;

  width: 30px;

  height: 1.5px;

  background: var(--text);

  position: absolute;

  left: 7px;

  transition: transform 0.25s ease, width 0.25s ease;

}



.menu-trigger span:first-child { top: calc(50% - 5px); }

.menu-trigger span:last-child {

  top: calc(50% + 4px);

  width: 60%;

  right: 7px;

  left: auto;

}



/* ── DRAWER ── */

.sb-drawer-overlay {

  position: fixed;

  inset: 0;

  z-index: 10000;

  background: rgba(0, 0, 0, 0.55);

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

  transition: opacity 0.35s ease, visibility 0.35s ease;

  border: none;

  padding: 0;

  cursor: pointer;

}



.sb-drawer-overlay.active {

  opacity: 1;

  visibility: visible;

  pointer-events: auto;

}



.sb-drawer {

  position: fixed;

  top: 0;

  right: 0;

  width: 320px;

  max-width: 90vw;

  height: 100vh;

  height: 100dvh;

  background: rgba(4, 10, 22, 0.97);

  border-left: 1px solid rgba(79, 195, 247, 0.2);

  z-index: 10001;

  transform: translateX(100%);

  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);

  display: flex;

  flex-direction: column;

  padding: 80px 32px 32px;

  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.45);

}



.sb-drawer.active { transform: translateX(0); }



.drawer-close {

  position: absolute;

  top: 16px;

  right: 18px;

  background: none;

  border: none;

  color: var(--text);

  font-size: 2rem;

  line-height: 1;

  cursor: pointer;

  padding: 8px 12px;

  min-width: 44px;

  min-height: 44px;

}



.drawer-links {

  display: flex;

  flex-direction: column;

  gap: 4px;

}



.drawer-links a {

  display: block;

  font-family: 'Syne', sans-serif;

  font-size: 1.25rem;

  font-weight: 700;

  color: var(--text);

  text-decoration: none;

  padding: 12px 0;

  border-bottom: 1px solid rgba(255, 255, 255, 0.08);

}



.drawer-links a:hover {

  color: var(--accent);

  text-decoration: none;

}



.drawer-cta {

  margin-top: 24px;

}



/* ── REVEAL ── */

.reveal {

  opacity: 0;

  transform: translateY(40px);

  transition: var(--sb-transition);

}



.reveal.active {

  opacity: 1;

  transform: translateY(0);

}



.sb-hero .reveal {

  opacity: 1;

  transform: none;

}



/* ── HERO ── */

.sb-hero {

  position: relative;

  min-height: 100vh;

  display: flex;

  align-items: center;

  overflow: hidden;

}



.sb-hero-media {

  position: absolute;

  inset: 0;

  z-index: 0;

  background: url('/assets/images/og-preview.jpg') center / cover no-repeat;

}



.sb-hero-video {

  width: 100%;

  height: 100%;

  object-fit: cover;

  opacity: 0.32;

  filter: contrast(1.05) brightness(0.8);

}



.sb-hero::after {

  content: '';

  position: absolute;

  inset: 0;

  background: linear-gradient(

    to right,

    rgba(4, 7, 15, 0.88) 0%,

    rgba(4, 7, 15, 0.65) 45%,

    rgba(4, 7, 15, 0.35) 100%

  );

  z-index: 1;

}



.sb-hero-content {

  position: relative;

  z-index: 2;

  width: 100%;

  padding: 120px 0 80px;

}



.sb-eyebrow {

  font-size: 0.7rem;

  letter-spacing: 0.38em;

  text-transform: uppercase;

  color: var(--accent);

  font-weight: 600;

  margin-bottom: 18px;

  display: block;

}



.sb-hero h1 {

  font-size: clamp(2.4rem, 5.5vw, 3.8rem);

  max-width: 820px;

  line-height: 1.05;

  margin-bottom: 20px;

}



.sb-hero-lead {

  max-width: 560px;

  font-size: 1.05rem;

  line-height: 1.7;

  color: var(--muted);

  margin-bottom: 28px;

}



.sb-hero-ctas {

  display: flex;

  flex-wrap: wrap;

  gap: 12px;

  margin-bottom: 22px;

}



.sb-btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  padding: 12px 22px;

  min-height: 44px;

  border-radius: 999px;

  font-size: 13px;

  font-weight: 700;

  text-decoration: none;

  transition: background 0.2s, border-color 0.2s, transform 0.2s;

}



.sb-btn-primary {

  background: linear-gradient(135deg, rgba(79, 195, 247, 0.95), rgba(129, 199, 132, 0.85));

  color: #04070f;

  border: 1px solid rgba(255, 255, 255, 0.2);

}



.sb-btn-primary:hover {

  transform: translateY(-2px);

  text-decoration: none;

}



.sb-btn-outline {

  border: 1px solid rgba(255, 255, 255, 0.22);

  background: rgba(255, 255, 255, 0.05);

  color: var(--text);

}



.sb-btn-outline:hover {

  background: rgba(255, 255, 255, 0.1);

  text-decoration: none;

}



/* ── SECTIONS ── */

.sb-section {

  padding: var(--sb-section-pad) 0;

}



.sb-section--alt {

  background: rgba(79, 195, 247, 0.025);

  border-top: 1px solid rgba(79, 195, 247, 0.12);

  border-bottom: 1px solid rgba(79, 195, 247, 0.12);

}



.sb-section-header {

  margin-bottom: 40px;

}



.sb-section-header h2 {

  font-size: clamp(1.8rem, 3.5vw, 2.6rem);

  margin-top: 8px;

}



.sb-section-header p {

  max-width: 620px;

  margin-top: 12px;

}



.sb-section-header--center {

  text-align: center;

}



.sb-section-header--center p {

  margin-left: auto;

  margin-right: auto;

}



/* ── SHOWCASE 16:9 cinema grid ── */

.sb-showcase-grid {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 16px;

}



#showcase-grid { display: contents; }



.sb-showcase-grid .showcase-tile {

  border-radius: 14px;

  aspect-ratio: 16 / 9;

  display: block;

}



.sb-showcase-grid.showcase-grid .showcase-tile {

  aspect-ratio: 16 / 9;

}



.sb-showcase-grid.showcase-grid .showcase-tile img {

  width: 100%;

  height: 100% !important;

  object-fit: cover;

  object-position: top center;

  aspect-ratio: 16 / 9;

}



.sb-showcase-foot {

  margin-top: 24px;

  text-align: center;

}



/* ── TESTIMONIAL ── */

.sb-testimonial-wrap {

  padding: 0 0 48px;

}



.sb-testimonial {

  position: relative;

  margin: 0;

  padding: 32px 32px 28px;

  background: rgba(10, 16, 28, 0.55);

  border: 1px solid rgba(255, 255, 255, 0.10);

  border-radius: var(--radius2);

  backdrop-filter: blur(12px);

  -webkit-backdrop-filter: blur(12px);

  max-width: 820px;

}



.sb-testimonial-mark {

  display: block;

  font-family: 'Syne', sans-serif;

  font-size: clamp(3.5rem, 10vw, 5rem);

  line-height: 0.85;

  color: #4fc3f7;

  margin-bottom: 8px;

  user-select: none;

}



.sb-testimonial-quote {

  font-family: 'Syne', sans-serif;

  font-size: clamp(1.05rem, 2.4vw, 1.35rem);

  line-height: 1.45;

  font-weight: 700;

  color: var(--text);

  margin: 0 0 16px;

}



.sb-testimonial-cite {

  font-size: 13px;

  color: var(--muted2);

  font-style: normal;

  line-height: 1.5;

}



.sb-testimonial-cite a {

  color: inherit;

  text-decoration: none;

  border-bottom: 1px solid rgba(255, 255, 255, 0.2);

  transition: color 0.2s ease, border-color 0.2s ease;

}



.sb-testimonial-cite a:hover {

  color: var(--accent);

  border-color: var(--accent);

  text-decoration: none;

}



.sb-testimonial-context {

  color: var(--muted2);

  font-size: 12px;

}



.sb-contact-brief {

  list-style: none;

  margin: 14px 0 0;

  padding: 0;

  display: grid;

  gap: 8px;

  max-width: 520px;

}



.sb-contact-brief li {

  position: relative;

  padding-left: 16px;

  font-size: 13px;

  line-height: 1.5;

  color: var(--muted2);

}



.sb-contact-brief li::before {

  content: '';

  position: absolute;

  left: 0;

  top: 0.55em;

  width: 6px;

  height: 6px;

  border-radius: 999px;

  background: linear-gradient(135deg, rgba(79, 195, 247, 0.95), rgba(129, 199, 132, 0.9));

}



/* ── SERVICE / PRICING TILES ── */

.sb-services-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 14px;

}



.sb-service-tile {

  background: rgba(10, 16, 28, 0.45);

  border: 1px solid rgba(255, 255, 255, 0.1);

  border-radius: var(--radius2);

  padding: 24px 22px;

  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;

}



.sb-service-tile:hover {

  transform: translateY(-4px);

  border-color: rgba(79, 195, 247, 0.3);

  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);

}



.sb-service-tile--starter { border-top: 2px solid rgba(79, 195, 247, 0.45); }

.sb-service-tile--growth { border-top: 2px solid rgba(129, 199, 132, 0.4); }

.sb-service-tile--custom { border-top: 2px solid rgba(255, 255, 255, 0.18); }



.sb-service-top {

  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  gap: 10px;

  margin-bottom: 12px;

}



.sb-service-top strong {

  font-family: 'Syne', sans-serif;

  font-size: 15px;

}



.sb-price-pill {

  font-size: 11px;

  padding: 5px 9px;

  border-radius: 999px;

  background: rgba(79, 195, 247, 0.12);

  border: 1px solid rgba(79, 195, 247, 0.22);

  color: #dbeafe;

  white-space: nowrap;

}



.sb-service-tile p {

  font-size: 13px;

  line-height: 1.55;

  color: var(--muted2);

}



.sb-price-caveat {

  margin-top: 18px;

  text-align: center;

  font-size: 12px;

  color: var(--muted2);

  font-style: italic;

}



/* ── ABOUT BULLETS ── */

.sb-about-list {

  list-style: none;

  padding: 0;

  margin: 0;

  display: grid;

  gap: 14px;

  max-width: 720px;

}



.sb-about-list li {

  display: flex;

  gap: 12px;

  align-items: flex-start;

}



.sb-about-list .dot {

  width: 10px;

  height: 10px;

  border-radius: 999px;

  margin-top: 7px;

  flex-shrink: 0;

  background: linear-gradient(135deg, rgba(79, 195, 247, 0.95), rgba(129, 199, 132, 0.9));

}



.sb-about-list strong {

  display: block;

  font-size: 14px;

  margin-bottom: 4px;

}



.sb-about-list span {

  font-size: 13px;

  color: var(--muted2);

  line-height: 1.5;

}



/* ── CTA BAND ── */

.sb-cta-band {

  padding: 64px 0;

  background: linear-gradient(135deg, rgba(79, 195, 247, 0.14), rgba(129, 199, 132, 0.08));

  border-top: 1px solid rgba(79, 195, 247, 0.2);

  border-bottom: 1px solid rgba(79, 195, 247, 0.2);

}



.sb-cta-band-inner {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 28px;

  flex-wrap: wrap;

}



.sb-cta-band h2 {

  font-size: clamp(1.5rem, 3vw, 2.1rem);

  max-width: 520px;

}



.sb-cta-band p {

  margin-top: 8px;

  font-size: 14px;

  color: var(--muted2);

}



.sb-contact-row {

  display: flex;

  flex-wrap: wrap;

  gap: 10px;

}



.sb-contact-row .btn-hub {

  min-width: 140px;

}



/* ── FAQ ACCORDION ── */

.sb-faq {

  display: grid;

  gap: 10px;

  max-width: 820px;

}



.sb-faq details {

  border: 1px solid rgba(255, 255, 255, 0.1);

  border-radius: 14px;

  background: rgba(10, 16, 28, 0.35);

  overflow: hidden;

}



.sb-faq summary {

  cursor: pointer;

  padding: 16px 18px;

  font-family: 'Syne', sans-serif;

  font-size: 14px;

  font-weight: 700;

  list-style: none;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 12px;

}



.sb-faq summary::-webkit-details-marker { display: none; }



.sb-faq summary::after {

  content: '+';

  color: var(--accent);

  font-size: 1.2rem;

  font-weight: 400;

  flex-shrink: 0;

}



.sb-faq details[open] summary::after { content: '−'; }



.sb-faq details p {

  padding: 0 18px 16px;

  margin: 0;

  font-size: 13px;

  line-height: 1.6;

  color: var(--muted2);

}



/* ── FOOTER ── */

.sb-footer {

  padding: 48px 0 32px;

  border-top: 1px solid var(--line);

}



.sb-footer-brand {

  font-family: 'Syne', sans-serif;

  font-size: clamp(2rem, 8vw, 4.5rem);

  font-weight: 800;

  opacity: 0.06;

  text-align: center;

  margin-bottom: 24px;

  pointer-events: none;

}



/* ── RESPONSIVE ── */

body {

  overflow-x: hidden;

}



@media (max-width: 768px) {

  .container {

    padding: 0 16px;

  }



  .sb-services-grid {

    grid-template-columns: 1fr;

  }



  .sb-service-tile {

    width: 100%;

  }



  .sb-service-top {

    flex-wrap: wrap;

  }



  .sb-price-pill {

    white-space: normal;

    text-align: right;

  }



  .sb-service-tile p {

    overflow-wrap: anywhere;

  }



  .sb-hero h1 {

    font-size: clamp(1.85rem, 8.5vw, 2.4rem);

    max-width: 100%;

  }



  .sb-hero-lead {

    font-size: 0.98rem;

    line-height: 1.65;

    max-width: 100%;

  }



  .sb-hero-ctas {

    flex-direction: column;

    width: 100%;

  }



  .sb-hero-ctas .sb-btn {

    width: 100%;

  }



  .sb-showcase-grid {

    grid-template-columns: 1fr;

    min-width: 0;

  }



  .sb-showcase-grid .showcase-tile {

    min-width: 0;

  }



  .sb-about-list li {

    gap: 14px;

  }



  .sb-about-list .dot {

    margin-top: 6px;

  }



  .sb-cta-band-inner {

    flex-direction: column;

    align-items: stretch;

  }



  .sb-contact-row {

    display: flex;

    flex-direction: column;

    width: 100%;

    gap: 10px;

  }



  .sb-contact-row .btn-hub {

    width: 100%;

    min-width: 0;

    justify-content: center;

  }



  .sb-faq summary {

    min-height: 44px;

    padding: 14px 16px;

    font-size: 13px;

    line-height: 1.4;

  }



  .sb-faq details p {

    padding: 0 16px 16px;

    font-size: 13px;

  }



  .sb-footer > .container > div:last-child {

    flex-direction: column;

    text-align: center;

    gap: 10px;

  }



  .sb-footer > .container > div:last-child a,

  .sb-footer > .container > div:last-child span {

    max-width: 100%;

    overflow-wrap: anywhere;

  }



  .sb-testimonial {

    padding: 24px 20px 22px;

  }



  .back-to-top {

    right: 14px;

    bottom: max(14px, env(safe-area-inset-bottom));

    z-index: 999;

  }



  .sb-brand span {

    display: none;

  }



  .drawer-links a {

    min-height: 44px;

    display: flex;

    align-items: center;

  }

}



@media (max-width: 940px) {

  .sb-nav-desktop { display: none; }



  .sb-services-grid {

    grid-template-columns: 1fr;

  }



  .sb-showcase-grid {

    grid-template-columns: 1fr;

  }



  .sb-hero::after {

    background: linear-gradient(

      to top,

      rgba(4, 7, 15, 0.9) 25%,

      rgba(4, 7, 15, 0.5) 100%

    );

  }



  .sb-hero {

    align-items: flex-end;

  }



  .sb-hero-content {

    padding-bottom: 64px;

  }



  .sb-section {

    padding: 72px 0;

  }



  .sb-cta-band-inner {

    flex-direction: column;

    align-items: flex-start;

  }



  .sb-contact-row {

    width: 100%;

  }



  .sb-contact-row .btn-hub {

    flex: 1 1 100%;

    justify-content: center;

  }

}



@media (min-width: 941px) {

  .menu-trigger { display: none; }

}