/* ===== OnStart — iOS Premium Design System ===== */

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden; /* horizontális scroll megelőzése mobilon */
}

body {
  background-color: #FBFBFD;
  color: #1D1D1F;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Helvetica Neue", sans-serif;
  overflow-x: hidden;
}

/* Minden gomb / link: azonnali tap mobilon (300ms delay eltávolítása) */
a, button, [role="button"], label {
  touch-action: manipulation;
}

/* === Navbar Frosted Glass === */
.navbar-glass {
  background: rgba(251, 251, 253, 0.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transform: translateZ(0); /* saját compositor-réteg → gyorsabb blur */
  will-change: transform;
}

/* === iOS Gradient Text === */
.ios-gradient-text {
  background: linear-gradient(135deg, #007AFF 0%, #5856D6 50%, #007AFF 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientTextShift 5s ease-in-out infinite;
}

.ios-gradient-text-light {
  background: linear-gradient(135deg, #4DA3FF 0%, #A78BFA 50%, #4DA3FF 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientTextShift 5s ease-in-out infinite;
}

@keyframes gradientTextShift {
  0%, 100% { background-position: 0% center; }
  50% { background-position: 200% center; }
}

/* === Section Badge === */
.ios-section-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 16px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #007AFF;
  background: rgba(0, 122, 255, 0.08);
  border: 1px solid rgba(0, 122, 255, 0.12);
  backdrop-filter: blur(8px);
}

/* === Pricing Check Items === */
.ios-check-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: rgba(29, 29, 31, 0.65);
  line-height: 1.5;
}

.ios-check-icon {
  flex-shrink: 0;
  display: flex;
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(48, 209, 88, 0.1);
  color: #30D158;
  margin-top: 1px;
}

.ios-check-icon-primary {
  flex-shrink: 0;
  display: flex;
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(0, 122, 255, 0.1);
  color: #007AFF;
  margin-top: 1px;
}

.ios-check-icon-amber {
  flex-shrink: 0;
  display: flex;
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 159, 10, 0.1);
  color: #FF9F0A;
  margin-top: 1px;
}

.ios-check-item-muted {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: rgba(29, 29, 31, 0.45);
  line-height: 1.5;
  padding-top: 12px;
  margin-top: 8px;
  border-top: 1px solid rgba(0, 0, 0, 0.04);
}

/* === iOS Card Hover Shine === */
.ios-card {
  position: relative;
  overflow: hidden;
  transform: translateZ(0); /* GPU-réteg a backdrop-filter-hez */
}

.ios-card::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

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

/* === FAQ Accordion === */
.ios-faq summary {
  list-style: none;
}

.ios-faq summary::-webkit-details-marker,
.ios-faq summary::marker {
  display: none;
  content: "";
}

/* === Hero Mesh Background === */
.hero-mesh {
  background-image:
    radial-gradient(at 80% 20%, rgba(0, 122, 255, 0.06) 0%, transparent 50%),
    radial-gradient(at 20% 60%, rgba(88, 86, 214, 0.04) 0%, transparent 50%),
    radial-gradient(at 60% 80%, rgba(255, 159, 10, 0.03) 0%, transparent 50%);
}

/* === Reveal Animation System === */
.reveal-element {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--reveal-delay, 0s);
  will-change: transform, opacity;
}

.reveal-element.revealed {
  opacity: 1;
  transform: translateY(0);
  will-change: auto; /* felszabadítjuk a GPU-rétegfoglalást animáció után */
}

/* === Selection Color === */
::selection {
  background: rgba(0, 122, 255, 0.15);
  color: #1D1D1F;
}

/* === Scrollbar (WebKit) === */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 100px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

/* === Performance: off-screen section rendering skip === */
main section {
  content-visibility: auto;
  contain-intrinsic-size: 0 900px;
}

/* === Animate-float: explicit GPU layer === */
.animate-float-gpu {
  will-change: transform;
  transform: translateZ(0);
}

/* === Hero review carousel === */
#hero-review-slides {
  will-change: transform;
}
#hero-review-slides > div {
  min-width: 100%;
}

/* === Focus visible for accessibility === */
:focus-visible {
  outline: 2px solid #007AFF;
  outline-offset: 2px;
  border-radius: 4px;
}

/* === Responsive adjustments === */
@media (max-width: 640px) {
  .reveal-element {
    transform: translateY(16px);
  }

  /* content-visibility intrinsic méret mobilon kisebb */
  main section {
    contain-intrinsic-size: 0 500px;
  }
}

/* === Dark contact form input fókusz stílusok === */
#contact .form-input:focus {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(96, 165, 250, 0.6) !important;
  outline: none;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25);
}

#contact .form-input::placeholder {
  color: rgba(255, 255, 255, 0.2);
}