/* =========================================================
   OMNIHIVE — MAINTENANCE PAGE
   Design tokens
   Color   : #05060B (void) / #6D8CFF (hive blue) / #A26BFA (hive violet)
             / #FF8A3D (hive ember) / #F5F6FB (paper) / #9CA1BE (mist)
   Type    : Poppins — display 800/600, body 300/400, caption 500 + tracking
   Layout  : single centered glass card, no scroll, floating brand strip
   Signature: the "hive mesh" — a slow-drifting hex-grid aurora behind
             frosted glass, echoing the hexagon in the OmniHive mark
   ========================================================= */

:root{
  --void:        #05060b;
  --void-2:      #0a0e1f;
  --blue:        #6d8cff;
  --violet:      #a26bfa;
  --ember:       #ff8a3d;
  --paper:       #f5f6fb;
  --mist:        #9ca1be;
  --glass:       rgba(255,255,255,0.055);
  --glass-brd:   rgba(255,255,255,0.14);
  --glass-hi:    rgba(255,255,255,0.09);

  --radius-lg:   28px;
  --radius-md:   18px;
  --radius-sm:   12px;

  --ease:        cubic-bezier(.22,1,.36,1);
  --dur-fast:    .25s;
  --dur-med:     .6s;
  --dur-slow:    1.4s;
}

*,*::before,*::after{ box-sizing:border-box; }

html,body{
  height:100%;
  margin:0;
  padding:0;
  overscroll-behavior:none;
}

body{
  font-family:'Poppins', system-ui, sans-serif;
  color:var(--paper);
  background:var(--void);
  min-height:100dvh;
  min-height:100vh;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

@media (max-height:640px), (max-width:380px){
  body{ overflow-y:auto; }
}

a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
img{ max-width:100%; display:block; }

.sr-only{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

:focus-visible{
  outline:2px solid var(--blue);
  outline-offset:3px;
  border-radius:8px;
}

/* ---------------------------------------------------------
   BACKGROUND — animated hive-mesh aurora
--------------------------------------------------------- */
.bg-mesh{
  position:fixed; inset:0; z-index:-2;
  background:
    radial-gradient(60% 50% at 18% 15%, rgba(109,140,255,.35), transparent 60%),
    radial-gradient(55% 45% at 85% 20%, rgba(162,107,250,.32), transparent 60%),
    radial-gradient(65% 55% at 50% 95%, rgba(255,138,61,.22), transparent 60%),
    linear-gradient(180deg, var(--void-2) 0%, var(--void) 55%, #08040d 100%);
  background-size:140% 140%, 140% 140%, 160% 160%, 100% 100%;
  animation: meshDrift 22s ease-in-out infinite alternate;
}

@keyframes meshDrift{
  0%{   background-position: 0% 0%,   100% 10%, 50% 100%, 0 0; }
  50%{  background-position: 20% 30%, 70% 40%,  40% 80%,  0 0; }
  100%{ background-position: 10% 15%, 85% 5%,   60% 100%, 0 0; }
}

#bubbles{
  position:fixed; inset:0; z-index:-1;
  width:100%; height:100%;
  pointer-events:none;
}

/* ---------------------------------------------------------
   LOADING SCREEN
--------------------------------------------------------- */
.loader{
  position:fixed; inset:0; z-index:999;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:22px;
  background:var(--void);
  transition:opacity .6s var(--ease), visibility .6s var(--ease);
}
.loader.is-hidden{
  opacity:0; visibility:hidden; pointer-events:none;
}
.loader-logo{
  border-radius:16px;
  animation: loaderPulse 1.6s ease-in-out infinite;
}
@keyframes loaderPulse{
  0%,100%{ transform:scale(1); filter:drop-shadow(0 0 0 rgba(109,140,255,0)); }
  50%{ transform:scale(1.06); filter:drop-shadow(0 0 18px rgba(109,140,255,.55)); }
}
.loader-ring{
  width:40px; height:40px;
  border-radius:50%;
  border:3px solid rgba(255,255,255,.12);
  border-top-color:var(--blue);
  border-right-color:var(--violet);
  animation:spin .9s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---------------------------------------------------------
   STAGE / LAYOUT
--------------------------------------------------------- */
.stage{
  position:relative;
  min-height:100dvh;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:clamp(16px, 2.4vh, 28px);
  padding:clamp(14px, 3vh, 32px) clamp(16px, 4vw, 32px);
}

/* ---------------------------------------------------------
   GLASS CARD
--------------------------------------------------------- */
.card{
  position:relative;
  width:min(680px, 100%);
  padding:clamp(28px, 4.2vh, 48px) clamp(22px, 5vw, 52px);
  border-radius:var(--radius-lg);
  background:var(--glass);
  border:1px solid var(--glass-brd);
  backdrop-filter:blur(22px) saturate(140%);
  -webkit-backdrop-filter:blur(22px) saturate(140%);
  box-shadow:
    0 30px 80px -30px rgba(0,0,0,.65),
    0 0 0 1px rgba(255,255,255,.03) inset,
    0 1px 0 rgba(255,255,255,.12) inset;
  text-align:center;
  overflow:hidden;
  opacity:0; transform:translateY(26px);
  animation: cardIn var(--dur-med) var(--ease) .15s forwards;
}

@keyframes cardIn{ to{ opacity:1; transform:translateY(0); } }

.card-shine{
  position:absolute; inset:-40% -40% auto -40%;
  height:60%;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.10) 48%, transparent 66%);
  transform:translateX(-30%);
  animation: shineSweep 7s ease-in-out infinite;
  pointer-events:none;
}
@keyframes shineSweep{
  0%,100%{ transform:translateX(-40%) translateY(0); }
  50%{ transform:translateX(40%) translateY(4%); }
}

.brand-logo{
  margin:0 auto 18px;
  border-radius:16px;
  filter:drop-shadow(0 6px 22px rgba(109,140,255,.35));
  animation: floatSlow 5s ease-in-out infinite;
}

.eyebrow{
  margin:0 0 10px;
  font-size:12px;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--blue);
  opacity:.9;
}

.headline{
  margin:0 0 12px;
  font-size:clamp(28px, 4.6vw, 46px);
  font-weight:800;
  line-height:1.12;
  letter-spacing:-.02em;
  color:var(--paper);
}

.grad-text{
  background:linear-gradient(100deg, var(--blue), var(--violet) 55%, var(--ember));
  background-size:220% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:gradShift 6s ease-in-out infinite;
}
@keyframes gradShift{
  0%,100%{ background-position:0% 50%; }
  50%{ background-position:100% 50%; }
}

.subheading{
  margin:0 0 14px;
  font-size:clamp(15px, 1.6vw, 18px);
  font-weight:500;
  color:var(--paper);
  opacity:.92;
}

.description{
  margin:0 auto clamp(20px, 3vh, 28px);
  max-width:52ch;
  font-size:clamp(13px, 1.3vw, 15px);
  font-weight:300;
  line-height:1.65;
  color:var(--mist);
}

/* ---------------------------------------------------------
   CTA BUTTONS
--------------------------------------------------------- */
.cta-row{
  display:flex; flex-wrap:wrap;
  gap:14px;
  justify-content:center;
  margin-bottom:clamp(22px, 3.4vh, 30px);
}

.btn{
  position:relative;
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 26px;
  font-family:inherit;
  font-size:14.5px;
  font-weight:600;
  color:#fff;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  overflow:hidden;
  isolation:isolate;
  cursor:pointer;
  transition:transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
  background-color:rgba(255,255,255,.04);
  backdrop-filter:blur(6px);
}
.btn i{ font-size:17px; }

.btn::before{
  content:"";
  position:absolute; inset:0; z-index:-1;
  opacity:.92;
}

.btn-whatsapp::before{
  background:linear-gradient(135deg, #22c55e, #0ea364);
}
.btn-email::before{
  background:linear-gradient(135deg, #6d8cff, #4f6bd8);
}

.btn-whatsapp{ box-shadow:0 8px 26px -8px rgba(34,197,94,.55); }
.btn-email{ box-shadow:0 8px 26px -8px rgba(109,140,255,.55); }

.btn:hover, .btn:focus-visible{
  transform:translateY(-3px);
}
.btn-whatsapp:hover{ box-shadow:0 14px 34px -8px rgba(34,197,94,.75); }
.btn-email:hover{ box-shadow:0 14px 34px -8px rgba(109,140,255,.75); }

.btn:active{ transform:translateY(-1px) scale(.98); }

.btn .ripple{
  position:absolute;
  border-radius:50%;
  background:rgba(255,255,255,.55);
  transform:scale(0);
  animation:rippleFx .6s ease-out forwards;
  pointer-events:none;
}
@keyframes rippleFx{
  to{ transform:scale(1); opacity:0; }
}

/* ---------------------------------------------------------
   SOCIAL
--------------------------------------------------------- */
.social-block{ display:flex; flex-direction:column; align-items:center; gap:12px; }

.social-label{
  margin:0;
  font-size:12.5px;
  font-weight:500;
  letter-spacing:.05em;
  color:var(--mist);
  text-transform:uppercase;
}
.social-label .handle{
  color:var(--blue);
  font-weight:600;
  text-transform:none;
  letter-spacing:0;
  margin-left:6px;
}

.social-row{ display:flex; gap:12px; }

.social-icon{
  width:38px; height:38px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  border:1px solid var(--glass-brd);
  background:rgba(255,255,255,.04);
  font-size:15px;
  color:var(--paper);
  transition:transform var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.social-icon:hover, .social-icon:focus-visible{
  transform:translateY(-4px) scale(1.08);
  color:var(--void);
  background:linear-gradient(135deg, var(--blue), var(--violet));
  border-color:transparent;
  box-shadow:0 10px 24px -8px rgba(162,107,250,.65);
}

/* ---------------------------------------------------------
   BRAND STRIP (bottom logos)
--------------------------------------------------------- */
.brand-strip{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:clamp(10px, 2vw, 18px);
  width:min(760px, 100%);
  opacity:0;
  animation: cardIn var(--dur-med) var(--ease) .4s forwards;
}

.brand-chip{
  display:flex; align-items:center; justify-content:center;
  padding:9px 16px;
  border-radius:var(--radius-sm);
  background:rgba(245,246,251,.94);
  border:1px solid rgba(255,255,255,.5);
  box-shadow:0 10px 26px -12px rgba(0,0,0,.55);
  animation:floatSlow 6s ease-in-out infinite;
  transition:transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.brand-chip:nth-child(1){ animation-delay:0s; }
.brand-chip:nth-child(2){ animation-delay:.4s; }
.brand-chip:nth-child(3){ animation-delay:.8s; }
.brand-chip:nth-child(4){ animation-delay:1.2s; }
.brand-chip:nth-child(5){ animation-delay:1.6s; }

.brand-chip:hover{
  transform:translateY(-6px) scale(1.06);
  box-shadow:0 16px 34px -12px rgba(109,140,255,.55);
}

.brand-chip img{
  height:22px;
  width:auto;
  object-fit:contain;
}

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

/* ---------------------------------------------------------
   FOOTER
--------------------------------------------------------- */
.site-footer{
  text-align:center;
  color:var(--mist);
  font-size:11.5px;
  font-weight:300;
  line-height:1.6;
  opacity:0;
  animation: cardIn var(--dur-med) var(--ease) .6s forwards;
}
.site-footer p{ margin:2px 0; }
.footer-tagline{ letter-spacing:.06em; color:rgba(156,161,190,.75); }

/* ---------------------------------------------------------
   RESPONSIVE
--------------------------------------------------------- */
@media (max-width:560px){
  .cta-row{ flex-direction:column; width:100%; }
  .btn{ width:100%; justify-content:center; }
  .brand-strip{ gap:10px; }
  .brand-chip{ flex:0 0 calc(50% - 10px); padding:8px 10px; }
  .brand-chip img{ height:18px; margin:0 auto; }
}

@media (max-width:360px){
  .card{ padding:26px 18px; }
}

/* ---------------------------------------------------------
   REDUCED MOTION
--------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .bg-mesh{ animation:none; }
}