@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --ink:        #10192B;
  --ink-2:      #1B2C47;
  --paper:      #F1F4F2;
  --paper-2:    #E7ECE8;
  --brass:      #B8863A;
  --brass-light:#D9B876;
  --steel:      #4C7A96;
  --text-soft:  #4A5568;
  --text-onink: #D8DEE6;

  --display: 'Fraunces', serif;
  --body:    'Inter', -apple-system, sans-serif;
  --mono:    'IBM Plex Mono', monospace;

  --edge: 60px;
}

@media (max-width: 720px){
  :root{ --edge: 24px; }
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  font-family:var(--body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

img{ display:block; max-width:100%; }
a{ color:inherit; }
section{ position:relative; }

.eyebrow{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--brass);
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:18px;
}
.eyebrow::before{
  content:"";
  width:22px;
  height:1px;
  background:var(--brass);
  display:inline-block;
}

h1,h2,h3{
  font-family:var(--display);
  font-weight:600;
  line-height:1.05;
  letter-spacing:-.01em;
}

.section-inner{
  max-width:1180px;
  margin:0 auto;
  padding:110px var(--edge);
}

@media (max-width:720px){
  .section-inner{ padding:80px var(--edge); }
}

/* ==========================================================================
   HEADER
   ========================================================================== */

header{
  position:fixed;
  top:0; left:0;
  width:100%;
  z-index:200;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px var(--edge);
  background:rgba(16,25,43,0.72);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(216,222,230,0.08);
  transition:padding .3s ease, background .3s ease;
}

header.scrolled{
  padding:12px var(--edge);
  background:rgba(16,25,43,0.94);
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
}

.brand-mark{
  width:40px;
  height:40px;
  border-radius:50%;
  background:var(--paper);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  flex:none;
}
.brand-mark img{ width:100%; height:100%; object-fit:cover; }

.brand-name{
  font-family:var(--display);
  font-weight:600;
  font-size:20px;
  color:var(--paper);
  letter-spacing:.01em;
}
.brand-name span{ color:var(--brass-light); }

nav{ display:flex; align-items:center; gap:38px; }

nav a{
  color:var(--text-onink);
  text-decoration:none;
  font-size:14px;
  letter-spacing:.02em;
  position:relative;
  padding:4px 0;
}
nav a::after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  width:0; height:1px;
  background:var(--brass-light);
  transition:width .25s ease;
}
nav a:hover::after{ width:100%; }

.nav-cta{
  border:1px solid var(--brass);
  padding:9px 20px !important;
  border-radius:2px;
  font-family:var(--mono);
  font-size:12px !important;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.nav-cta::after{ display:none; }
.nav-cta:hover{ background:var(--brass); color:var(--ink); }

.nav-toggle{
  display:none;
  flex-direction:column;
  gap:5px;
  background:none;
  border:none;
  cursor:pointer;
  padding:6px;
}
.nav-toggle span{
  width:24px; height:2px; background:var(--paper);
}

@media (max-width:880px){
  nav{
    position:fixed;
    top:0; right:0;
    height:100vh;
    width:min(320px,80vw);
    background:var(--ink);
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    gap:28px;
    padding:40px var(--edge);
    transform:translateX(100%);
    transition:transform .35s ease;
  }
  nav.open{ transform:translateX(0); }
  nav a{ font-size:20px; }
  .nav-toggle{ display:flex; }
}

/* ==========================================================================
   HERO
   ========================================================================== */

.hero{
  min-height:100svh;
  display:flex;
  align-items:center;
  background:var(--ink);
  overflow:hidden;
}

.hero-slides{
  position:absolute;
  inset:0;
}
.hero-slides::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(16,25,43,.88) 0%, rgba(16,25,43,.80) 45%, rgba(16,25,43,.96) 100%);
}
.hero-slide{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity 1.6s ease;
  filter:saturate(0.85) brightness(0.9);
}
.hero-slide.active{ opacity:1; }

/* Snellen-chart decorative column */
.snellen{
  position:absolute;
  right:6%;
  top:0;
  bottom:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:22px;
  font-family:var(--display);
  color:rgba(216,222,230,0.10);
  pointer-events:none;
  user-select:none;
}
.snellen span{ display:block; font-weight:600; letter-spacing:.08em; }
.snellen span:nth-child(1){ font-size:120px; }
.snellen span:nth-child(2){ font-size:88px; }
.snellen span:nth-child(3){ font-size:62px; }
.snellen span:nth-child(4){ font-size:42px; }
.snellen span:nth-child(5){ font-size:28px; }

@media (max-width:1000px){ .snellen{ display:none; } }

.hero-content{
  position:relative;
  z-index:5;
  max-width:760px;
  padding:140px var(--edge) 80px;
}

.hero-content h1{
  font-size:clamp(40px,6vw,74px);
  color:var(--paper);
  margin-bottom:26px;
  filter:blur(9px);
  opacity:0;
  transform:translateY(14px);
  transition:filter 1.1s ease .15s, opacity .8s ease .15s, transform .8s ease .15s;
}
.hero-content h1.in-focus{
  filter:blur(0);
  opacity:1;
  transform:translateY(0);
}
.hero-content h1 em{
  font-style:italic;
  color:var(--brass-light);
}

.hero-sub{
  color:var(--text-onink);
  font-size:17px;
  max-width:480px;
  margin-bottom:44px;
}

.hero-actions{
  display:flex;
  align-items:center;
  gap:28px;
  flex-wrap:wrap;
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:var(--brass);
  color:var(--ink);
  text-decoration:none;
  font-weight:600;
  font-size:15px;
  padding:15px 28px;
  border-radius:2px;
  transition:background .2s ease, transform .2s ease;
}
.btn:hover{ background:var(--brass-light); transform:translateY(-2px); }

/* Sharpness test — signature interactive element */
.focus-test{
  display:flex;
  align-items:center;
  gap:14px;
}
.focus-test-label{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--text-onink);
}
.focus-toggle{
  display:flex;
  border:1px solid rgba(216,222,230,0.35);
  border-radius:999px;
  overflow:hidden;
}
.focus-toggle button{
  background:none;
  border:none;
  color:var(--text-onink);
  font-family:var(--mono);
  font-size:13px;
  padding:9px 18px;
  cursor:pointer;
  transition:background .2s ease, color .2s ease;
}
.focus-toggle button.active{
  background:var(--brass);
  color:var(--ink);
}

/* ==========================================================================
   ABOUT
   ========================================================================== */

.about{ background:var(--paper); }
.about .section-inner{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:center;
}
.about-media{
  position:relative;
  aspect-ratio:4/5;
  overflow:hidden;
  border-radius:3px;
}
.about-media img{
  width:100%; height:100%; object-fit:cover;
}
.about-media-tag{
  position:absolute;
  bottom:18px; left:18px;
  background:rgba(16,25,43,0.85);
  color:var(--paper);
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.08em;
  padding:8px 14px;
  border-radius:2px;
}

.about h2{
  font-size:clamp(30px,3.6vw,42px);
  margin-bottom:22px;
}
.about p{
  color:var(--text-soft);
  margin-bottom:16px;
  max-width:46ch;
}
.about-stats{
  display:flex;
  gap:40px;
  margin-top:34px;
}
.about-stats div strong{
  display:block;
  font-family:var(--display);
  font-size:32px;
  color:var(--steel);
}
.about-stats div span{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--text-soft);
}

@media (max-width:880px){
  .about .section-inner{ grid-template-columns:1fr; gap:44px; }
}

/* ==========================================================================
   OFERTA / SERVICES
   ========================================================================== */

.oferta{ background:var(--ink); color:var(--paper); }
.oferta .eyebrow{ color:var(--brass-light); }
.oferta .eyebrow::before{ background:var(--brass-light); }
.oferta h2{
  font-size:clamp(30px,3.6vw,42px);
  color:var(--paper);
  max-width:14ch;
  margin-bottom:60px;
}

.service-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:rgba(216,222,230,0.14);
  border:1px solid rgba(216,222,230,0.14);
}
.service-card{
  background:var(--ink);
  padding:36px 30px;
  transition:background .25s ease;
}
.service-card:hover{ background:var(--ink-2); }
.service-card .num{
  font-family:var(--mono);
  font-size:12px;
  color:var(--brass-light);
  margin-bottom:20px;
  display:block;
}
.service-card h3{
  font-size:20px;
  color:var(--paper);
  margin-bottom:12px;
  font-weight:500;
}
.service-card p{
  color:var(--text-onink);
  font-size:14.5px;
}

@media (max-width:880px){
  .service-grid{ grid-template-columns:1fr; }
}

/* ==========================================================================
   BADANIE WZROKU / PROCESS
   ========================================================================== */

.badanie{ background:var(--paper-2); }
.badanie-head{
  max-width:640px;
  margin-bottom:64px;
}
.badanie-head h2{
  font-size:clamp(30px,3.6vw,42px);
}
.badanie-head p{
  color:var(--text-soft);
  margin-top:18px;
}

.steps{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:32px;
}
.step{
  border-top:2px solid var(--brass);
  padding-top:22px;
}
.step .step-num{
  font-family:var(--mono);
  font-size:13px;
  color:var(--steel);
  display:block;
  margin-bottom:14px;
}
.step h3{
  font-size:19px;
  font-weight:500;
  margin-bottom:10px;
}
.step p{
  color:var(--text-soft);
  font-size:14.5px;
}

@media (max-width:880px){
  .steps{ grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){
  .steps{ grid-template-columns:1fr; }
}

/* ==========================================================================
   GALERIA
   ========================================================================== */

.galeria{ background:var(--paper); }
.galeria h2{
  font-size:clamp(30px,3.6vw,42px);
  margin-bottom:50px;
}
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:170px;
  gap:14px;
}
.gallery-grid a{
  position:relative;
  overflow:hidden;
  border-radius:2px;
  display:block;
}
.gallery-grid img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .5s ease, filter .5s ease;
  filter:saturate(.92);
}
.gallery-grid a:hover img{
  transform:scale(1.06);
  filter:saturate(1.05);
}
.gallery-grid .tall{ grid-row:span 2; }

@media (max-width:880px){
  .gallery-grid{ grid-template-columns:repeat(2,1fr); }
}

/* ==========================================================================
   KONTAKT
   ========================================================================== */

.kontakt{ background:var(--ink); color:var(--paper); }
.kontakt .section-inner{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
}
.kontakt h2{
  font-size:clamp(30px,3.6vw,42px);
  color:var(--paper);
  margin-bottom:24px;
}
.kontakt p.lead{
  color:var(--text-onink);
  max-width:42ch;
  margin-bottom:36px;
}

.kontakt-details{ display:flex; flex-direction:column; gap:22px; }
.kontakt-details div{ display:flex; flex-direction:column; gap:4px; }
.kontakt-details .label{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--brass-light);
}
.kontakt-details .value{ font-size:16px; color:var(--paper); }
.kontakt-details a.value{ text-decoration:none; }
.kontakt-details a.value:hover{ text-decoration:underline; }

.placeholder-note{
  margin-top:14px;
  font-size:12.5px;
  color:var(--text-onink);
  border-left:2px solid var(--brass);
  padding-left:12px;
}

.contact-form{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.contact-form input,
.contact-form textarea{
  background:var(--ink-2);
  border:1px solid rgba(216,222,230,0.2);
  color:var(--paper);
  font-family:var(--body);
  font-size:14px;
  padding:14px 16px;
  border-radius:2px;
}
.contact-form input:focus,
.contact-form textarea:focus{
  outline:none;
  border-color:var(--brass);
}
.contact-form textarea{ resize:vertical; min-height:110px; }
.contact-form button{
  align-self:flex-start;
  border:none;
  cursor:pointer;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

footer{
  background:var(--ink);
  border-top:1px solid rgba(216,222,230,0.1);
  padding:28px var(--edge);
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
}
footer p{
  color:var(--text-onink);
  font-size:12.5px;
  font-family:var(--mono);
}

/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible{
  outline:2px solid var(--brass-light);
  outline-offset:3px;
}

@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important; }
  html{ scroll-behavior:auto; }
}

.site-footer {
  background-color: #222;
  color: #fff;
  padding: 20px;
  text-align: center;
}

.social-media {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
}

.social-link {
  display: inline-flex;
  align-items: center;
  gap: 8px; /* Odstęp między ikoną a tekstem */
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  padding: 8px 14px;
  border-radius: 5px;
  transition: all 0.3s ease;
}

/* Kolory po najechaniu */
.social-link.facebook:hover {
  background-color: #1877f2;
}

.social-link.instagram:hover {
  background-color: #e4405f;
}

/* Pełnoekranowa nakładka */
#intro-loader {
  position: fixed;
  inset: 0;
  background-color: #0d0d0d;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.8s ease, visibility 0.8s ease;
}

/* Oko */
.eye-icon {
  width: 100px;
  height: 100px;
  stroke: #fff;
  opacity: 0;
  transform: scale(0.6);
  filter: blur(10px);
}

/* Start animacji */
#intro-loader.active .eye-icon {
  animation: eyeReveal 2.2s ease-in-out forwards;
}

/* Schowanie loadera */
#intro-loader.fade-out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@keyframes eyeReveal {
  0% {
    opacity: 0;
    transform: scale(0.6);
    filter: blur(15px);
  }
  35% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
  70% {
    opacity: 1;
    transform: scale(1.05);
    filter: blur(0);
  }
  100% {
    opacity: 0;
    transform: scale(1.3);
    filter: blur(25px);
  }
}