/* =======================================================================
   VSME PAGE — Custom theme layer                                           
   (import this *after* the global home.css + navbar.css)                  
   ======================================================================= */
@import url("/assets/css/home.css");

/* -----------------------------------------------------------------------
   1.  THEME TOKENS                                                        
   ---------------------------------------------------------------------*/
:root{
  /* Palette */
  --vsme-accent: #59afa2;
  --vsme-dark:   #0d3c55;
  --vsme-bg-soft:#e0f7f1;

  /* Motion */
  --tr-fast:  .3s ease;
  --tr-medium:.45s ease;
  --tr-slow: .6s cubic-bezier(.22,.61,.36,1);

  /* Shadows */
  --sh-sm: 0 4px 10px rgba(0,0,0,.08);
  --sh-md: 0 10px 20px rgba(0,0,0,.15);
  --sh-lg: 0 18px 38px rgba(0,0,0,.18);
}

/* -----------------------------------------------------------------------
   2.  GLOBAL ANIMATIONS + ACCESSIBILITY                                   
   ---------------------------------------------------------------------*/
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
@keyframes liftUp{to{transform:translateY(-6px) scale(1.03)}}
@keyframes pulseRing{0%{opacity:0;transform:scale(.5)}50%{opacity:.6}100%{opacity:0;transform:scale(1.7)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;}
}

/* -----------------------------------------------------------------------
   3.  UTILITY CLASSES                                                     
   ---------------------------------------------------------------------*/
.reveal{opacity:0;transform:translateY(40px);transition:opacity var(--tr-fast),transform var(--tr-fast);}
.reveal.show{opacity:1;transform:none;}

.hover-lift{@media (hover:hover){transition:transform var(--tr-fast),box-shadow var(--tr-fast);will-change:transform;}}
.hover-lift:hover{animation:liftUp .35s forwards;box-shadow:var(--sh-lg);}  

.hover-zoom{@media (hover:hover){transition:transform var(--tr-medium);}}
.hover-zoom:hover{transform:scale(1.04);}  

.pulse-btn{position:relative;overflow:hidden;}
.pulse-btn::after{content:"";position:absolute;inset:0;border-radius:inherit;background:rgba(255,255,255,.15);animation:pulseRing 2.4s infinite;pointer-events:none;}

/* -----------------------------------------------------------------------
   4.  TYPOGRAPHY                                                         
   ---------------------------------------------------------------------*/
.section-title{color:var(--vsme-dark);font-family:Montserrat,Arial,Helvetica,sans-serif;font-weight:600;font-size:clamp(1.8rem,3.5vw,2.4rem);margin:3rem 0 1.6rem;text-align:center;}
.section-title.left{text-align:left;}

/* -----------------------------------------------------------------------
   5.  COMPONENTS                                                          
   ---------------------------------------------------------------------*/
.text-box{background:var(--vsme-bg-soft);border:1px solid #b3d9cc;border-radius:10px;padding:1.25rem;font-size:1.05rem;transition:box-shadow var(--tr-fast);}
.text-box:hover{box-shadow:var(--sh-sm);}  

.custom-table{border-radius:10px;overflow:hidden;background:rgba(255,255,255,.6);backdrop-filter:blur(8px);}
.custom-table tbody tr{transition:background var(--tr-fast);}
.custom-table tbody tr:hover{background:rgba(89,175,162,.08);}  

.feature-box{background:linear-gradient(135deg,var(--vsme-dark) 0%,#103548 100%);color:#fff;text-align:center;font-weight:600;padding:1.8rem 1.5rem;border-radius:14px;height:100%;border:3px solid transparent;transition:transform var(--tr-fast),box-shadow var(--tr-fast),border var(--tr-fast);}  
.feature-box:hover{transform:translateY(-8px) scale(1.04);box-shadow:var(--sh-lg);border-color:var(--vsme-accent);}  

.hero-img{border-radius:12px;box-shadow:var(--sh-md);animation:floatY 18s ease-in-out infinite;}

.glass{background:rgba(255,255,255,.35);backdrop-filter:blur(10px) saturate(120%);border-radius:18px;}

.service-box{background:var(--vsme-bg-soft);border:1px solid #c1e2db;border-radius:10px;padding:1.5rem;font-size:1.12rem;}

/* -----------------------------------------------------------------------
   6.  CONTACT SECTION                                                     
   ---------------------------------------------------------------------*/
.contact-section{background:linear-gradient(135deg,#5e9d9f 0%,#74c5b5 100%);border-radius:18px;padding:2.8rem 2rem;color:#fff;position:relative;overflow:hidden;}
.contact-section label{font-weight:600;}
.contact-section .form-control{font-size:1rem;}
.contact-section .btn-light,.contact-section .btn-gradient{--btn-shadow:0 8px 18px rgba(0,0,0,.25);transition:transform var(--tr-fast),box-shadow var(--tr-fast),filter var(--tr-fast);}
.contact-section .btn-light:hover,.contact-section .btn-gradient:hover{transform:translateY(-4px);box-shadow:var(--btn-shadow);filter:brightness(1.05);}  

/* -----------------------------------------------------------------------
   7.  FOOTER                                                             
   ---------------------------------------------------------------------*/
.footer{background:#f8f9fa;border-top:4px solid var(--vsme-accent);padding:2rem 1rem;color:#333;}
.footer-social a{@media(hover:hover){transition:transform var(--tr-fast),color var(--tr-fast);} }
.footer-social a:hover{transform:scale(1.2);color:var(--vsme-accent);}  

/* Footer navigation */
.footer-nav{display:flex;flex-wrap:wrap;gap:.75rem 1.25rem;justify-content:center;margin:1.5rem 0;}
.footer-nav a{font-size:.875rem;color:#555;text-decoration:none;padding:.25rem .5rem;border-radius:3px;transition:background var(--tr-fast),color var(--tr-fast);}  
.footer-nav a:hover{background:rgba(13,60,85,.15);color:var(--vsme-accent);}