/* ════════════════════════════════════════════════════════════════════
   KoshCloud — shared site styles (loaded by index / platform / helix)
   ════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
html { background: #05050A; scroll-behavior: smooth; scroll-padding-top: 80px; overflow-x: hidden; max-width: 100%; }
body { background: #05050A; color: #EDEAF5; font-family: 'Inter', sans-serif; overflow-x: hidden; max-width: 100vw; }

/* ── Glass ── */
.glass {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.glass-card {
  background: rgba(17,17,34,0.6);
  border: 1px solid rgba(255,255,255,0.07);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* ── Gold gradient text ── */
.gold-text {
  background: linear-gradient(120deg, #BF8E10 0%, #E8BC2A 45%, #C9A227 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Buttons ── */
.btn-gold {
  background: linear-gradient(135deg, #C9A227, #E8BC2A);
  color: #05050A;
  font-weight: 600;
  transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
  cursor: pointer;
}
.btn-gold:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 28px rgba(201,162,39,0.35);
}
.btn-ghost {
  border: 1px solid rgba(255,255,255,0.11);
  color: #EDEAF5;
  transition: border-color 0.18s ease, color 0.18s ease;
  cursor: pointer;
}
.btn-ghost:hover { border-color: rgba(201,162,39,0.45); color: #C9A227; }

/* ── Glow spots ── */
.glow { position: absolute; border-radius: 50%; filter: blur(130px); pointer-events: none; }

/* ── Animations ── */
@keyframes spin-slow    { to { transform: rotate(360deg); } }
@keyframes spin-rev     { to { transform: rotate(-360deg); } }
@keyframes marquee      { to { transform: translateX(-50%); } }
@keyframes pulse-ring   { 0%,100%{opacity:.4} 50%{opacity:.8} }
@keyframes fade-up      { from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:translateY(0)} }

.spin-slow { animation: spin-slow 130s linear infinite; }
.spin-rev  { animation: spin-rev  70s linear infinite; }
.marquee-el { animation: marquee 34s linear infinite; }

/* ── Fade-in on scroll (legacy, still used) ── */
.fade { opacity: 0; transform: translateY(20px); transition: opacity .55s ease, transform .55s ease; }
.fade.in { opacity: 1; transform: translateY(0); }

/* ════════════════════════════════════════════════════════════════════
   REVEAL SYSTEM — richer scroll-triggered animations
   Usage: <div class="reveal" data-anim="up|left|right|scale|blur" data-delay="1..6">
   ════════════════════════════════════════════════════════════════════ */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .7s cubic-bezier(.16,.84,.44,1),
              transform .7s cubic-bezier(.16,.84,.44,1),
              filter .7s cubic-bezier(.16,.84,.44,1);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; filter: none; }
.reveal:not(.in)[data-anim="left"]  { transform: translateX(-36px); }
.reveal:not(.in)[data-anim="right"] { transform: translateX(36px); }
.reveal:not(.in)[data-anim="scale"] { transform: scale(.92); }
.reveal:not(.in)[data-anim="blur"]  { filter: blur(10px); transform: translateY(16px); }

/* Stagger delays */
.reveal[data-delay="1"] { transition-delay: .07s; }
.reveal[data-delay="2"] { transition-delay: .14s; }
.reveal[data-delay="3"] { transition-delay: .21s; }
.reveal[data-delay="4"] { transition-delay: .28s; }
.reveal[data-delay="5"] { transition-delay: .35s; }
.reveal[data-delay="6"] { transition-delay: .42s; }

/* Auto-stagger children of a .stagger container */
.stagger > * {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .65s cubic-bezier(.16,.84,.44,1),
              transform .65s cubic-bezier(.16,.84,.44,1);
}
.stagger.in > * { opacity: 1; transform: none; }
.stagger.in > *:nth-child(1) { transition-delay: .05s; }
.stagger.in > *:nth-child(2) { transition-delay: .12s; }
.stagger.in > *:nth-child(3) { transition-delay: .19s; }
.stagger.in > *:nth-child(4) { transition-delay: .26s; }
.stagger.in > *:nth-child(5) { transition-delay: .33s; }
.stagger.in > *:nth-child(6) { transition-delay: .40s; }
.stagger.in > *:nth-child(7) { transition-delay: .47s; }
.stagger.in > *:nth-child(8) { transition-delay: .54s; }
.stagger.in > *:nth-child(9) { transition-delay: .61s; }

/* ── Gentle float (decorative SVG / cards) ── */
@keyframes float-y { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
.float-y { animation: float-y 6s ease-in-out infinite; }

/* ── Headline gradient shimmer ── */
@keyframes shimmer { to { background-position: 200% center; } }
.shimmer-text {
  background: linear-gradient(110deg, #BF8E10 0%, #E8BC2A 30%, #FFF1C2 50%, #E8BC2A 70%, #C9A227 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 6s linear infinite;
}

/* ── DNA helix base-pair pulse ── */
@keyframes base-pulse { 0%,100%{opacity:.55} 50%{opacity:1} }
.dna-rung { animation: base-pulse 3.2s ease-in-out infinite; }

/* ── Card lift on hover (reusable) ── */
.lift { transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.lift:hover {
  transform: translateY(-4px);
  border-color: rgba(201,162,39,0.25);
  box-shadow: 0 10px 40px rgba(201,162,39,0.08);
}

/* ── Service cards ── */
.svc {
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  cursor: default;
}
.svc:hover {
  transform: translateY(-3px);
  border-color: rgba(201,162,39,0.22);
  box-shadow: 0 0 40px rgba(201,162,39,0.07);
}

/* ── Bento grid ── */
.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.b-lg  { grid-column: span 2; grid-row: span 2; }
.b-2   { grid-column: span 2; }
@media(max-width:768px){
  .bento { grid-template-columns: 1fr; }
  .b-lg, .b-2 { grid-column: span 1; grid-row: span 1; }
}

/* ── Form inputs ── */
input, select, textarea {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.09);
  color: #EDEAF5;
  transition: border-color .18s ease, box-shadow .18s ease;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: #C9A227;
  box-shadow: 0 0 0 3px rgba(201,162,39,0.12);
}
input::placeholder, textarea::placeholder { color: #3A3755; }
select option { background: #0C0C16; }

/* ── Section divider line ── */
.divider { border: none; border-top: 1px solid rgba(255,255,255,0.05); }

/* ── Terminal ── */
.terminal {
  background: #08080F;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  overflow: hidden;
}
.terminal-bar {
  background: rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ── Reduced motion ── */
@media(prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .reveal, .stagger > * { opacity: 1 !important; transform: none !important; filter: none !important; }
}

/* ── Number heading style ── */
.step-num {
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  font-size: 4rem;
  line-height: 1;
  background: linear-gradient(135deg, rgba(201,162,39,0.15), rgba(201,162,39,0.05));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  user-select: none;
}

/* ── Page hero (sub-pages) ── */
.page-hero {
  position: relative;
  overflow: hidden;
  padding-top: 9rem;
  padding-bottom: 3.5rem;
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */

/* Prevent iOS auto-zoom when tapping inputs */
input, select, textarea { font-size: max(16px, 1em); }

/* Console mockup: scroll sideways on mobile instead of breaking */
.console-frame {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 1rem;
}
.console-frame > * { min-width: 680px; }

/* Terminals: scroll sideways on mobile */
.terminal { overflow-x: auto; }
.terminal > div:last-child { min-width: 380px; }

@media(max-width: 767px) {
  .py-28 { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; }
  .py-24 { padding-top: 3rem   !important; padding-bottom: 3rem   !important; }
  .mb-20 { margin-bottom: 2.5rem !important; }
  .mb-16 { margin-bottom: 2rem   !important; }
  .mb-14 { margin-bottom: 2rem   !important; }

  section.hero-section { padding-top: 6.5rem !important; }
  .page-hero { padding-top: 7rem !important; }

  .step-num { font-size: 2.5rem !important; }

  .bento { grid-template-columns: 1fr !important; }
  .b-lg, .b-2 { grid-column: span 1 !important; grid-row: span 1 !important; }

  .btn-gold, .btn-ghost { min-height: 52px !important; padding-top: 0.875rem !important; padding-bottom: 0.875rem !important; }
  input[type="text"],
  input[type="email"],
  input[type="tel"]   { min-height: 52px !important; }
  label.flex          { min-height: 48px; }

  #svc-checkboxes { grid-template-columns: repeat(2, 1fr) !important; }

  #otp-input {
    width: 100% !important;
    max-width: none !important;
    font-size: 2rem !important;
    letter-spacing: 0.25em !important;
    text-align: center;
  }

  .mobile-menu { display: flex !important; }
  .mobile-menu-panel { display: none; }
  .mobile-menu-panel.open { display: flex !important; }

  .form-card { padding: 1.5rem !important; border-radius: 1.5rem !important; }
}

/* Mobile nav overlay */
.mobile-menu { display: none; }
.mobile-menu-panel {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 95;                     /* above all page content; nav is 100 */
  background: #05050A;             /* fully opaque — zero bleed-through */
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 92px 36px 48px;         /* top clears the floating nav pill */
  overflow-y: auto;
  gap: 0;
  -webkit-overflow-scrolling: touch;
}

/* Reveal fragment targets immediately (fallback for browsers/navigation where
   the IntersectionObserver may not fire before scroll completes). */
:target .reveal,
:target .stagger > *,
:target .fade {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  transition: none !important;
}