/* =========================================================
   SoftWash Pro — custom stylesheet
   Complements Tailwind CDN utilities. Contains: fonts hookup,
   glassmorphism, glow effects, parallax, before/after slider,
   timeline, accordion, reveal animations, cookie banner.
   ========================================================= */

:root{
  --navy-deep:#0f172a;
  --navy-mid:#1e293b;
  --cyan:#06b6d4;
  --cyan-bright:#38bdf8;
  --cyan-deep:#0284c7;
  --mist:#f8fafc;
}

html{ scroll-behavior:smooth; }
body{ background-color:var(--navy-deep); overflow-x:hidden; }

::selection{ background:var(--cyan-bright); color:var(--navy-deep); }

/* Subtle scrollbar */
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--navy-deep); }
::-webkit-scrollbar-thumb{ background:var(--navy-mid); border-radius:8px; border:2px solid var(--navy-deep); }
::-webkit-scrollbar-thumb:hover{ background:var(--cyan-deep); }

/* Background grid texture */
.bg-grid{
  background-image:
    linear-gradient(rgba(56,189,248,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56,189,248,0.035) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 40%, transparent 100%);
}

/* Focus visibility (a11y) */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible{
  outline: 2px solid var(--cyan-bright);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ============ Header ============ */
#site-header{ background:transparent; }
#site-header.is-scrolled{
  background:rgba(15,23,42,0.75);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(255,255,255,0.06);
}

.nav-link{ position:relative; transition:color .2s ease; }
.nav-link:hover{ color:var(--mist); }
.nav-link::after{
  content:""; position:absolute; left:0; bottom:-6px; width:0; height:1.5px;
  background:var(--cyan-bright); transition:width .25s ease;
}
.nav-link:hover::after{ width:100%; }

.mobile-nav-link{
  padding:12px 4px; border-bottom:1px solid rgba(255,255,255,0.06);
  transition:color .2s ease, padding-left .2s ease;
}
.mobile-nav-link:hover{ color:var(--cyan-bright); padding-left:8px; }

/* Hamburger */
.hamburger-line{
  position:absolute; left:8px; right:8px; height:2px; background:#e2e8f0;
  border-radius:2px; transition:transform .3s ease, opacity .3s ease, top .3s ease;
}
#menu-toggle[aria-expanded="true"] .hamburger-line:nth-child(1){ top:20px; transform:rotate(45deg); }
#menu-toggle[aria-expanded="true"] .hamburger-line:nth-child(2){ opacity:0; }
#menu-toggle[aria-expanded="true"] .hamburger-line:nth-child(3){ top:20px; transform:rotate(-45deg); }

/* ============ Hero parallax ============ */
.parallax-bg{
  background-size:cover;
  background-position:center;
}
@media (min-width:1024px){
  .parallax-bg{ background-attachment:fixed; }
}
@media (prefers-reduced-motion: reduce){
  .parallax-bg{ background-attachment:scroll; }
}

@keyframes bounce-slow{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(8px); }
}
.animate-bounce-slow{ animation:bounce-slow 2.2s ease-in-out infinite; }

/* ============ Reveal on scroll ============ */
.reveal{
  opacity:0; transform:translateY(24px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
}
.reveal.is-visible{ opacity:1; transform:translateY(0); }
.reveal-delay-1.is-visible{ transition-delay:.08s; }
.reveal-delay-2.is-visible{ transition-delay:.16s; }
.reveal-delay-3.is-visible{ transition-delay:.24s; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* ============ Glass panel ============ */
.glass-panel{
  background:rgba(30,41,59,0.55);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(148,163,184,0.15);
  border-radius:24px;
}

/* ============ Service cards ============ */
.service-card{
  background:rgba(30,41,59,0.45);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(148,163,184,0.12);
  border-radius:20px;
  padding:28px 24px;
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease, background .3s ease;
}
.service-card:hover{
  transform:translateY(-6px);
  border-color:rgba(56,189,248,0.4);
  background:rgba(30,41,59,0.7);
  box-shadow:0 0 0 1px rgba(56,189,248,0.2), 0 20px 40px -20px rgba(6,182,212,0.35);
}
.service-icon{
  width:52px; height:52px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, rgba(6,182,212,0.18), rgba(56,189,248,0.06));
  border:1px solid rgba(56,189,248,0.25);
  color:var(--cyan-bright);
  transition:transform .3s ease;
}
.service-card:hover .service-icon{ transform:scale(1.08) rotate(-4deg); }

/* ============ Compare (soft wash vs pressure) ============ */
.compare-card{
  background:rgba(30,41,59,0.45);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(148,163,184,0.12);
  border-radius:24px;
  padding:32px;
}

/* ============ Timeline ============ */
.timeline-step{ text-align:left; position:relative; }
.timeline-num{
  position:relative; z-index:10;
  width:56px; height:56px; border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  font-family:'JetBrains Mono', monospace; font-weight:600; font-size:1.05rem;
  background:var(--navy-deep);
  border:1px solid rgba(56,189,248,0.4);
  color:var(--cyan-bright);
  box-shadow:0 0 24px rgba(6,182,212,0.25);
}

/* ============ Global persistent scroll-cleaning background ============ */
.global-clean-bg{
  position:fixed; inset:0; z-index:-1;
  overflow:hidden;
  background:var(--navy-deep);
}
.global-clean-img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
.global-clean-dirty{ filter:saturate(0.65) brightness(0.72) contrast(1.05); }
.global-clean-wrap{
  position:absolute; inset:0;
  clip-path:inset(0 100% 0 0);
  will-change:clip-path;
}
.global-clean-wrap .global-clean-clean{ position:absolute; inset:0; }
.global-clean-overlay{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 90% 55% at 50% 0%, rgba(15,23,42,0.3), transparent 60%),
    linear-gradient(180deg, rgba(15,23,42,0.5) 0%, rgba(15,23,42,0.72) 45%, rgba(15,23,42,0.85) 100%);
}

.global-clean-badge{
  position:fixed; z-index:30; left:28px; bottom:28px;
  width:88px; height:88px; border-radius:50%;
  background:rgba(15,23,42,0.55);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(56,189,248,0.3);
  box-shadow:0 0 24px rgba(6,182,212,0.25);
  align-items:center; justify-content:center;
}
.global-clean-badge svg{ width:100%; height:100%; will-change:transform; }
.global-clean-badge-center{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }

.global-clean-progress-fixed{
  position:fixed; z-index:30; right:28px; bottom:28px;
  flex-direction:column; align-items:center; gap:8px;
}
.global-clean-progress-track{
  width:4px; height:120px; border-radius:999px;
  background:rgba(255,255,255,0.12);
  overflow:hidden; display:flex; align-items:flex-end;
}
.global-clean-progress-fill{
  width:100%; height:0%;
  background:linear-gradient(to top, var(--cyan-deep), var(--cyan-bright));
  border-radius:999px;
}
.global-clean-progress-label{
  font-family:'JetBrains Mono', monospace;
  font-size:10px; letter-spacing:0.06em;
  color:var(--cyan-bright);
}

@media (prefers-reduced-motion: reduce){
  .global-clean-badge svg{ animation:none !important; }
}

/* ============ References gallery — before/after split cards ============ */
.reference-card{
  position:relative;
  border-radius:20px;
  overflow:hidden;
  background:rgba(30,41,59,0.55);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(148,163,184,0.12);
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.reference-card:hover{
  transform:translateY(-6px);
  border-color:rgba(56,189,248,0.35);
  box-shadow:0 20px 40px -20px rgba(6,182,212,0.3);
}
.reference-split{
  display:grid; grid-template-columns:1fr 1fr;
  position:relative; aspect-ratio:4/3;
}
.reference-half{ position:relative; overflow:hidden; }
.reference-half img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease; }
.reference-card:hover .reference-half img{ transform:scale(1.06); }
.reference-half:first-child{ border-right:2px solid rgba(56,189,248,0.55); }
.reference-half:first-child img{ filter:grayscale(0.45) brightness(0.68) contrast(0.95); }
.reference-half-tag{
  position:absolute; bottom:8px; left:8px;
  font-family:'JetBrains Mono', monospace; font-size:9px; letter-spacing:0.06em;
  padding:3px 9px; border-radius:999px;
  background:rgba(15,23,42,0.75); color:#94a3b8;
  border:1px solid rgba(255,255,255,0.15);
}
.reference-half-tag-after{ color:var(--cyan-bright); border-color:rgba(56,189,248,0.4); }
.reference-tag{
  position:absolute; top:12px; left:12px; z-index:2;
  font-family:'JetBrains Mono', monospace; font-size:10px; letter-spacing:0.08em; text-transform:uppercase;
  padding:5px 11px; border-radius:999px;
  background:rgba(15,23,42,0.8); backdrop-filter:blur(6px);
  border:1px solid rgba(56,189,248,0.3); color:var(--cyan-bright);
}
.reference-body{ padding:20px 22px 24px; }
.reference-stars{ margin-top:12px; color:#fbbf24; font-size:.85rem; letter-spacing:1px; }

/* ============ Calculator ============ */
.calc-label{
  display:block; font-size:.8rem; font-weight:600; color:#94a3b8;
  margin-bottom:8px; text-transform:uppercase; letter-spacing:0.04em;
}
.calc-input{
  width:100%; background:rgba(15,23,42,0.6);
  border:1px solid rgba(148,163,184,0.2);
  border-radius:12px; padding:13px 16px;
  color:#f8fafc; font-size:.95rem;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.calc-input:focus{
  outline:none; border-color:var(--cyan-bright);
  box-shadow:0 0 0 3px rgba(56,189,248,0.15);
}
.calc-input option{ background:var(--navy-mid); color:#f8fafc; }

.checkbox-row{
  display:flex; align-items:center; gap:10px;
  font-size:.9rem; color:#cbd5e1; cursor:pointer;
  padding:11px 14px; border-radius:12px;
  border:1px solid rgba(148,163,184,0.15);
  background:rgba(15,23,42,0.4);
  transition:border-color .2s ease, background .2s ease;
}
.checkbox-row:hover{ border-color:rgba(56,189,248,0.35); }
.checkbox-input{
  width:18px; height:18px; accent-color:var(--cyan-bright); cursor:pointer;
}

/* ============ Dropzone ============ */
.dropzone{
  border:1.5px dashed rgba(148,163,184,0.3);
  border-radius:16px;
  background:rgba(15,23,42,0.35);
  cursor:pointer;
  transition:border-color .2s ease, background .2s ease;
}
.dropzone:hover, .dropzone.is-dragover{
  border-color:var(--cyan-bright);
  background:rgba(56,189,248,0.06);
}
.preview-thumb{
  position:relative; aspect-ratio:1/1; border-radius:10px; overflow:hidden;
  border:1px solid rgba(148,163,184,0.2);
}
.preview-thumb img{ width:100%; height:100%; object-fit:cover; }
.preview-remove{
  position:absolute; top:4px; right:4px; width:22px; height:22px; border-radius:50%;
  background:rgba(15,23,42,0.85); color:#f87171; display:flex; align-items:center;
  justify-content:center; font-size:14px; line-height:1; border:1px solid rgba(255,255,255,0.15);
}

/* ============ FAQ Accordion ============ */
.faq-item{
  background:rgba(30,41,59,0.4);
  border:1px solid rgba(148,163,184,0.12);
  border-radius:16px;
  overflow:hidden;
}
.faq-question{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  padding:20px 22px; text-align:left; font-weight:600; color:#f1f5f9; font-size:.98rem;
  background:transparent; transition:color .2s ease;
}
.faq-question:hover{ color:var(--cyan-bright); }
.faq-icon{ color:var(--cyan-bright); flex-shrink:0; transition:transform .3s ease; margin-left:16px; }
.faq-question[aria-expanded="true"] .faq-icon{ transform:rotate(135deg); }
.faq-answer{
  max-height:0; overflow:hidden;
  transition:max-height .35s ease, padding .35s ease;
  padding:0 22px;
}
.faq-answer p{ color:#94a3b8; font-size:.9rem; line-height:1.7; padding-bottom:20px; }
.faq-item.is-open .faq-answer{ max-height:240px; }

/* ============ Cookie banner ============ */
#cookie-banner.is-visible{
  transform:translateY(0); opacity:1;
}

/* ============ Utility ============ */
.tabular-nums{ font-variant-numeric:tabular-nums; }



/* ============ Social icons ============ */
.social-icon{
  width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(148,163,184,0.25); color:#94a3b8;
  transition:color .2s ease, border-color .2s ease, transform .2s ease;
}
.social-icon:hover{ color:var(--cyan-bright); border-color:rgba(56,189,248,0.5); transform:translateY(-2px); }

/* ============ Modals (ÁSZF / Adatvédelem) ============ */
.modal-overlay{
  position:fixed; inset:0; z-index:100;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  background:rgba(15,23,42,0.72);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  opacity:0; pointer-events:none;
  transition:opacity .25s ease;
}
.modal-overlay.is-open{ opacity:1; pointer-events:auto; }
.modal-panel{
  width:100%; max-width:720px; max-height:85vh; overflow-y:auto;
  background:var(--navy-mid);
  border:1px solid rgba(148,163,184,0.15);
  border-radius:20px;
  transform:translateY(16px) scale(0.98);
  transition:transform .25s ease;
  box-shadow:0 40px 80px -20px rgba(0,0,0,0.6);
}
.modal-overlay.is-open .modal-panel{ transform:translateY(0) scale(1); }
.modal-header{
  position:sticky; top:0; z-index:2;
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 24px;
  background:var(--navy-mid);
  border-bottom:1px solid rgba(148,163,184,0.12);
}
.modal-close{
  width:36px; height:36px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  color:#94a3b8; border:1px solid rgba(148,163,184,0.2);
  transition:color .2s ease, border-color .2s ease;
}
.modal-close:hover{ color:var(--cyan-bright); border-color:rgba(56,189,248,0.4); }
.modal-body{ padding:8px 24px 28px; color:#cbd5e1; font-size:.9rem; line-height:1.75; }
.modal-body h4{
  font-family:'Space Grotesk', sans-serif; font-weight:600; color:#f8fafc;
  margin-top:22px; margin-bottom:8px; font-size:1rem;
}
.modal-body h4:first-of-type{ margin-top:6px; }
.modal-body p{ margin-bottom:4px; color:#94a3b8; }
.modal-updated{
  font-family:'JetBrains Mono', monospace; font-size:.75rem;
  color:var(--cyan-bright); margin-bottom:18px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; }
}