/* ==========================================================================
   Scioon — bespoke styles that go beyond plain Tailwind utility classes
   (Tailwind Play CDN only compiles utility classes found in the HTML, so
   this file stays framework-agnostic plain CSS — no @layer/theme()).
   Everything else on the site (layout, spacing, typography, buttons,
   cards, nav, footer, forms) is authored with Tailwind utility classes
   directly in the markup.
   ========================================================================== */

::selection { background: #ff6a1a; color: #fff; }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #0a0a0c; }
::-webkit-scrollbar-thumb { background: #24252b; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #d94f0a; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background:
    linear-gradient(180deg, rgba(10, 10, 12, 0.92), #09090b 38%, #070708),
    radial-gradient(circle at 20% 10%, rgba(255, 106, 26, 0.14), transparent 34%);
  padding: 72px 0 0;
}

.site-footer__glow {
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 999px;
  background: rgba(255, 106, 26, 0.14);
  filter: blur(90px);
  pointer-events: none;
}

.site-footer__glow--one {
  top: -160px;
  left: 8%;
}

.site-footer__glow--two {
  right: -180px;
  bottom: 18%;
  opacity: 0.65;
}

.footer-cta {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: center;
  padding: 34px;
  border: 1px solid rgba(255, 106, 26, 0.28);
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(255, 106, 26, 0.18), rgba(255, 106, 26, 0.04)),
    rgba(20, 21, 26, 0.82);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.36);
  overflow: hidden;
}

.footer-cta::after {
  content: "";
  position: absolute;
  inset: auto -70px -110px auto;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: rgba(255, 106, 26, 0.22);
  filter: blur(38px);
}

.footer-eyebrow {
  display: inline-block;
  margin-bottom: 10px;
  color: #ff6a1a;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.footer-cta h2 {
  max-width: 780px;
  margin: 0 0 10px;
  font-size: clamp(1.8rem, 3vw, 3rem);
  line-height: 1.05;
  font-weight: 800;
}

.footer-cta p {
  max-width: 720px;
  color: #a4a7b1;
  font-size: 16px;
}

.footer-cta__actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-end;
}

.footer-primary-btn,
.footer-secondary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 22px;
  border-radius: 999px;
  font-weight: 700;
  transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease;
}

.footer-primary-btn {
  color: #fff;
  background: linear-gradient(135deg, #ff6a1a, #d94f0a);
  box-shadow: 0 14px 34px rgba(255, 106, 26, 0.28);
}

.footer-secondary-btn {
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
}

.footer-primary-btn:hover,
.footer-secondary-btn:hover {
  transform: translateY(-2px);
}

.footer-secondary-btn:hover {
  border-color: rgba(255, 106, 26, 0.5);
  background: rgba(255, 106, 26, 0.1);
}

.footer-main {
  display: grid;
  grid-template-columns: minmax(280px, 1.6fr) repeat(3, minmax(150px, 0.75fr)) minmax(250px, 1.05fr);
  gap: 34px;
  padding: 58px 0 38px;
}

.footer-logo {
  width: auto;
  height: 42px;
}

.footer-brand p {
  max-width: 360px;
  margin: 22px 0;
  color: #a4a7b1;
  line-height: 1.65;
}

.footer-trust-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  max-width: 390px;
  margin-bottom: 22px;
}

.footer-trust-grid div {
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.035);
}

.footer-trust-grid strong {
  display: block;
  color: #fff;
  font-size: 22px;
  line-height: 1;
}

.footer-trust-grid span {
  display: block;
  margin-top: 6px;
  color: #858997;
  font-size: 12px;
  line-height: 1.3;
}

.footer-socials {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.footer-socials a {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  color: #fff;
  background: rgba(255, 255, 255, 0.04);
  transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease;
}

.footer-socials a:hover {
  transform: translateY(-3px);
  border-color: #ff6a1a;
  background: #ff6a1a;
}

.footer-column h5,
.footer-contact h5 {
  margin-bottom: 18px;
  color: #fff;
  font-size: 16px;
  font-weight: 800;
}

.footer-column h5::after,
.footer-contact h5::after {
  content: "";
  display: block;
  width: 34px;
  height: 2px;
  margin-top: 10px;
  background: #ff6a1a;
}

.footer-column ul {
  display: grid;
  gap: 11px;
  color: #a4a7b1;
  font-size: 14px;
}

.footer-column a {
  display: inline-flex;
  color: inherit;
  transition: color 180ms ease, transform 180ms ease;
}

.footer-column a:hover {
  color: #ff6a1a;
  transform: translateX(4px);
}

.footer-contact {
  display: grid;
  align-content: start;
  gap: 12px;
}

.footer-contact-card,
.footer-whatsapp {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.035);
  color: #c6c8d0;
  transition: border-color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.footer-contact-card i,
.footer-whatsapp i {
  color: #ff6a1a;
  margin-top: 3px;
}

.footer-contact-card small {
  display: block;
  color: #858997;
  font-size: 12px;
  margin-bottom: 2px;
}

.footer-contact-card:hover,
.footer-whatsapp:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 106, 26, 0.45);
  background: rgba(255, 106, 26, 0.08);
}

.footer-whatsapp {
  align-items: center;
  color: #fff;
  font-weight: 700;
}

.footer-whatsapp i {
  margin-top: 0;
}

.footer-service-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 22px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-service-strip span {
  padding: 9px 13px;
  border: 1px solid rgba(255, 106, 26, 0.25);
  border-radius: 999px;
  color: #c6c8d0;
  background: rgba(255, 106, 26, 0.07);
  font-size: 13px;
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 24px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: #858997;
  font-size: 14px;
}

.footer-bottom div {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.footer-bottom a {
  color: #a4a7b1;
  transition: color 180ms ease;
}

.footer-bottom a:hover {
  color: #ff6a1a;
}

@media (max-width: 1180px) {
  .footer-main {
    grid-template-columns: minmax(260px, 1.3fr) repeat(2, minmax(160px, 1fr));
  }

  .footer-contact {
    grid-column: span 2;
  }
}

@media (max-width: 900px) {
  .footer-cta,
  .footer-main {
    grid-template-columns: 1fr;
  }

  .footer-cta__actions {
    justify-content: flex-start;
  }

  .footer-contact {
    grid-column: auto;
  }
}

@media (max-width: 640px) {
  .site-footer {
    padding-top: 48px;
  }

  .footer-cta {
    padding: 24px;
    border-radius: 20px;
  }

  .footer-primary-btn,
  .footer-secondary-btn {
    width: 100%;
  }

  .footer-main {
    gap: 28px;
    padding-top: 42px;
  }

  .footer-trust-grid {
    grid-template-columns: 1fr;
  }

  .footer-bottom {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* ==========================================================================
   Header dropdowns
   ========================================================================== */
.nav-dropdown-link {
  display: block;
  color: #a4a7b1;
  font-size: 14px;
  line-height: 1.35;
  padding: 10px 12px;
  transition: color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.nav-dropdown-link:hover {
  color: #ff6a1a;
}

@media (min-width: 768px) {
  .nav-dropdown {
    padding-bottom: 14px;
    margin-bottom: -14px;
  }

  .nav-dropdown::after {
    content: "";
    position: absolute;
    left: -18px;
    right: -18px;
    top: 100%;
    height: 18px;
  }

  .nav-dropdown-menu {
    position: absolute;
    top: calc(100% - 2px);
    left: 50%;
    z-index: 1100;
    width: 240px;
    max-width: calc(100vw - 32px);
    padding: 10px;
    background: rgba(19, 20, 25, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.48), 0 8px 24px rgba(255, 106, 26, 0.12);
    transform: translateX(-50%) translateY(8px);
    backdrop-filter: blur(16px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
  }

  .nav-dropdown:hover > .nav-dropdown-menu,
  .nav-dropdown:focus-within > .nav-dropdown-menu {
    display: block !important;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }

  .nav-dropdown:hover > .nav-dropdown-menu--wide,
  .nav-dropdown:focus-within > .nav-dropdown-menu--wide {
    display: grid !important;
  }

  .nav-dropdown-menu::before {
    content: "";
    position: absolute;
    top: -7px;
    left: 50%;
    width: 12px;
    height: 12px;
    background: rgba(19, 20, 25, 0.98);
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    transform: translateX(-50%) rotate(45deg);
  }

  .nav-dropdown-menu--wide {
    width: min(560px, calc(100vw - 32px));
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
  }

  .nav-dropdown-link {
    border-radius: 8px;
    color: #c6c8d0;
    min-height: 42px;
    display: flex;
    align-items: center;
  }

  .nav-dropdown-link:hover {
    background: rgba(255, 106, 26, 0.12);
    color: #ff6a1a;
    transform: translateX(3px);
  }
}

@media (max-width: 767px) {
  .nav-dropdown-link {
    padding: 9px 0 9px 12px;
  }
}


.bOGXvy,
[class*="bOGXvy"],
.eapps-link,
a[href*="elfsight.com"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}
  

/* ==========================================================================
   CTA "SCIOON" word — outlined + gradient-filled text (used on every page)
   ========================================================================== */
.cta-word {
  font-weight: 800;
  color: transparent;
  -webkit-text-stroke: 2px #ff6a1a;
  background: linear-gradient(135deg, #ff6a1a, #d94f0a);
  -webkit-background-clip: text;
  background-clip: text;
  letter-spacing: 2px;
  filter: drop-shadow(0 10px 30px rgba(255, 106, 26, 0.35));
}

/* ==========================================================================
   Work / case-study image overlay (photo-style gradient blocks)
   ========================================================================== */
.work-bg.bg-furniture { background: linear-gradient(135deg, #6b5644, #382c22); }
.work-bg.bg-skincare { background: linear-gradient(135deg, #8b9c7d, #46503d); }
.work-bg.bg-fintech { background: linear-gradient(135deg, #1c2333, #05070d); }

/* ==========================================================================
   Hero section background image — full-bleed (cover) so it spans the whole
   section width with no gap/seam. The section's min-height below is tuned
   to the image's aspect ratio so "cover" doesn't crop the icon graphic at
   top/bottom; the graphic sits in the image's right half, leaving the dark
   left half clear for the heading/CTA text.
   ========================================================================== */
.hero {
  position: relative;
  background-image: url('../assets/hero.png');
  background-repeat: no-repeat;
  background-position: right center;
  background-size: cover;
}

/* Below the lg breakpoint the desktop image's dark-left/graphic-right split
   no longer fits the centered single-column text. Swap in the dedicated
   portrait crop (centered composition, empty top for the eyebrow/title)
   and darken it behind the text, fading out toward the bottom so the
   podium/icon cluster reveals after the buttons and social proof. */
@media (max-width: 1023px) {
  .hero {
    background-image: url('../assets/mobile-view-hero.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center top 320px;
  }
}

/* The "contain" scale grows with viewport width, so the fixed phone offset
   above pushes the graphic too low (and clips its bottom) once the section
   gets close to tablet width. Give this range its own tuned offset/height. */
@media (min-width: 768px) and (max-width: 1023px) {
  .hero {
    background-position: center top 130px;
  }
}

/* ==========================================================================
   Hero heading typewriter cursor (see js/main.js initHeroTypewriter)
   ========================================================================== */
.type-cursor {
  display: inline-block;
  width: 3px;
  height: 0.85em;
  margin-left: 3px;
  background: #ff6a1a;
  vertical-align: -0.1em;
  animation: typeCursorBlink 0.9s steps(1) infinite;
}

@keyframes typeCursorBlink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* ==========================================================================
   Card traveling-light border — a bright orange dash literally travels
   along the card's rounded-rect outline (SVG stroke-dashoffset), so it
   follows the true border path on any card size instead of approximating
   it with a rotated gradient.
   ========================================================================== */
.card-glow-border { position: relative; isolation: isolate; }
.card-border-trace {
  animation: cardBorderTrace 3s linear infinite;
}

@keyframes cardBorderTrace {
  to { stroke-dashoffset: -100; }
}

/* ==========================================================================
   Service / industry page motion
   ========================================================================== */
.image-lift {
  isolation: isolate;
}

.animated-hero-image {
  transform: scale(1.04);
  animation: heroImageFloat 12s ease-in-out infinite alternate;
}

.animated-panel {
  position: relative;
  overflow: hidden;
  transition: transform 260ms ease, border-color 260ms ease, box-shadow 260ms ease;
}

.animated-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent, rgba(255, 106, 26, 0.12), transparent);
  transform: translateX(-120%);
  transition: transform 700ms ease;
  pointer-events: none;
}

.animated-panel:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 106, 26, 0.65);
  box-shadow: 0 18px 42px rgba(255, 106, 26, 0.14);
}

.animated-panel:hover::before {
  transform: translateX(120%);
}

.floating-stat {
  animation: floatingStat 4.8s ease-in-out infinite;
}

.floating-stat:nth-child(2) { animation-delay: 0.5s; }
.floating-stat:nth-child(3) { animation-delay: 1s; }

.animated-chip {
  animation: chipPulse 3.2s ease-in-out infinite;
}

.animated-chip:nth-child(even) {
  animation-delay: 0.45s;
}

.animated-row,
.process-step {
  transition: transform 220ms ease, color 220ms ease, border-color 220ms ease, background-color 220ms ease;
}

.animated-row:hover,
.process-step:hover {
  transform: translateX(6px);
  border-color: rgba(255, 106, 26, 0.5);
  background-color: rgba(255, 106, 26, 0.06);
}

/* ==========================================================================
   Admin layout
   ========================================================================== */
@media (min-width: 1024px) {
  .admin-shell {
    display: block;
    min-height: 100vh;
  }

  .admin-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: 280px;
    overflow-y: auto;
    z-index: 50;
  }

  .admin-main {
    margin-left: 280px;
    min-height: 100vh;
    width: calc(100vw - 280px);
    max-width: calc(100vw - 280px);
    box-sizing: border-box;
  }
}

.admin-stats-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-bottom: 32px;
  width: 100%;
}

.admin-main > section,
.admin-main > form,
.admin-main > .admin-stats-grid {
  width: 100%;
  max-width: 100%;
}

.admin-stat-card {
  display: block;
  min-width: 0;
  min-height: 194px;
}

@media (max-width: 640px) {
  .admin-stats-grid {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 768px) {
  .admin-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .admin-stats-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@keyframes heroImageFloat {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to { transform: scale(1.11) translate3d(-18px, -10px, 0); }
}

@keyframes floatingStat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes chipPulse {
  0%, 100% { box-shadow: 0 0 0 rgba(255, 106, 26, 0); }
  50% { box-shadow: 0 0 22px rgba(255, 106, 26, 0.24); }
}

@media (prefers-reduced-motion: reduce) {
  .animate-glow, .animate-icon-glow { animation: none; }
  .card-border-trace { animation: none; }
  .type-cursor { animation: none; }
  .animated-hero-image, .floating-stat, .animated-chip { animation: none; }
  .animated-panel, .animated-row, .process-step { transition: none; }
}