/*
 * Gravity Group RSA – main stylesheet
 *
 * A simple, responsive theme for the Gravity Group RSA static website.  The
 * palette uses a deep blue primary colour with a warm orange accent.  This
 * file defines basic typography, layout containers, navigation styling,
 * buttons, cards and forms.  It also includes utility classes for
 * spacing and text alignment.
 */

*{
box-sizing:border-box;
margin:0;
padding:0;
font-family:Arial,Helvetica,sans-serif;
}

body{
background:#f4f6fb;
color:#222;
line-height:1.6;
}

.container{
width:92%;
max-width:1200px;
margin:auto;
}

.navbar{
background:#0f1d38;
color:white;
position:sticky;
top:0;
z-index:100;
}

.nav-inner{
display:flex;
justify-content:space-between;
align-items:center;
padding:18px 0;
}

.logo a{
color:white;
font-weight:700;
font-size:20px;
text-decoration:none;
}

.nav-links a{
margin-left:20px;
text-decoration:none;
color:white;
}

.mobile-toggle{
display:none;
background:none;
border:none;
font-size:26px;
color:white;
cursor:pointer;
}

.hero{
padding:80px 0;
text-align:center;
background:linear-gradient(135deg,#1e2d50,#3a4e77);
color:white;
}

.hero h1{
font-size:42px;
margin-bottom:20px;
}

.hero p{
margin-bottom:30px;
}

.hero-buttons{
display:flex;
justify-content:center;
gap:20px;
flex-wrap:wrap;
}

.btn{
padding:14px 26px;
border-radius:10px;
text-decoration:none;
font-weight:600;
}

.btn.primary{
background:#111;
color:white;
}

.btn.whatsapp{
background:#25D366;
color:#111;
}

.assist-section{
padding:70px 0;
text-align:center;
}

.assist-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
gap:20px;
margin-top:30px;
}

.assist-card{
background:white;
border-radius:18px;
padding:25px;
box-shadow:0 10px 25px rgba(0,0,0,.15);
text-decoration:none;
color:#111;
transition:.3s;
}

.assist-card:hover{
transform:translateY(-6px);
}

.icon{
font-size:32px;
margin-bottom:10px;
}

.stats{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
gap:20px;
margin-top:40px;
}

.stat{
background:#e6ebf7;
padding:20px;
border-radius:12px;
}

.services{
padding:70px 0;
}

.service-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
gap:20px;
margin-top:30px;
}

.service-card{
background:white;
padding:25px;
border-radius:14px;
box-shadow:0 6px 16px rgba(0,0,0,.15);
text-decoration:none;
color:#222;
transition:.3s;
}

.service-card:hover{
transform:translateY(-5px);
}

footer{
background:#0f1d38;
color:white;
padding:40px 0;
margin-top:60px;
}

.footer-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:30px;
}

footer a{
color:#9cc3ff;
text-decoration:none;
}

@media(max-width:768px){

.nav-links{
display:none;
flex-direction:column;
background:#0f1d38;
position:absolute;
top:70px;
right:0;
width:200px;
padding:20px;
}

.nav-links.open{
display:flex;
}

.mobile-toggle{
display:block;
}

.hero h1{
font-size:30px;
}

}
.hero-card.hero-card--video{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  border-radius:28px;
  padding:1.5rem;
  min-height:560px;
  background:
    linear-gradient(135deg, rgba(9,18,35,.92), rgba(24,48,87,.78));
  box-shadow:
    0 24px 60px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.08);
}

.hero-card-bg{
  position:absolute;
  inset:0;
  z-index:0;
}

.hero-card-video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform:scale(1.06);
  filter:saturate(1.05) contrast(1.02) brightness(.72);
  animation:heroVideoZoom 14s ease-in-out infinite alternate;
}

.hero-card-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(7,16,30,.32) 0%, rgba(7,16,30,.62) 55%, rgba(7,16,30,.86) 100%),
    radial-gradient(circle at 20% 20%, rgba(75,150,255,.20), transparent 35%),
    radial-gradient(circle at 80% 30%, rgba(37,211,102,.14), transparent 30%);
  backdrop-filter: blur(1px);
}

.hero-card-glow{
  position:absolute;
  border-radius:999px;
  filter:blur(50px);
  opacity:.45;
  mix-blend-mode:screen;
  pointer-events:none;
}

.hero-card-glow--one{
  width:220px;
  height:220px;
  left:-40px;
  top:20px;
  background:rgba(76, 146, 255, .35);
  animation:floatGlowOne 7s ease-in-out infinite;
}

.hero-card-glow--two{
  width:260px;
  height:260px;
  right:-60px;
  bottom:-20px;
  background:rgba(37, 211, 102, .22);
  animation:floatGlowTwo 9s ease-in-out infinite;
}

.hero-card-content{
  position:relative;
  z-index:1;
}

.hero-card-title{
  margin:0 0 .5rem;
  font-size:1.35rem;
  color:#fff;
  letter-spacing:-.01em;
}

.hero-card-text{
  margin:0;
  color:#dbe5f3;
  max-width:48ch;
}

.action-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:1rem;
}

.action-card{
  position:relative;
  display:flex;
  align-items:center;
  gap:.9rem;
  min-height:96px;
  padding:1rem;
  border-radius:22px;
  text-decoration:none;
  color:#fff;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:
    0 10px 30px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition:
    transform .28s ease,
    box-shadow .28s ease,
    background .28s ease,
    border-color .28s ease;
  overflow:hidden;
}

.action-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,.10) 45%, transparent 100%);
  transform:translateX(-130%);
  transition:transform .7s ease;
}

.action-card:hover::before{
  transform:translateX(130%);
}

.action-card:hover,
.action-card:focus-visible{
  transform:translateY(-6px) scale(1.02);
  background:rgba(255,255,255,.18);
  border-color:rgba(255,255,255,.24);
  box-shadow:
    0 20px 40px rgba(0,0,0,.24),
    0 0 0 3px rgba(255,255,255,.08);
  outline:none;
}

.action-card:active{
  transform:translateY(-2px) scale(.985);
}

.action-card i{
  flex:0 0 56px;
  width:56px;
  height:56px;
  display:grid;
  place-items:center;
  border-radius:18px;
  font-size:1.25rem;
  color:#0ea44b;
  background:rgba(222, 244, 232, .90);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
}

.action-card strong{
  display:block;
  font-size:1rem;
  line-height:1.2;
  margin-bottom:.2rem;
  color:#fff;
}

.action-card span{
  display:block;
  font-size:.92rem;
  line-height:1.35;
  color:#d6e3f3;
}

.status-strip{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:1rem;
  margin-top:1.25rem;
}

.status-item{
  position:relative;
  padding:1.1rem 1rem;
  border-radius:20px;
  text-align:center;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:0 10px 26px rgba(0,0,0,.16);
  transition:transform .28s ease, background .28s ease;
  animation:statusPulse 5s ease-in-out infinite;
}

.status-item:nth-child(2){
  animation-delay:.5s;
}

.status-item:nth-child(3){
  animation-delay:1s;
}

.status-item:hover{
  transform:translateY(-4px);
  background:rgba(255,255,255,.14);
}

.status-item strong{
  display:block;
  font-size:1.7rem;
  line-height:1;
  color:#fff;
  margin-bottom:.35rem;
}

.status-item span{
  color:#d9e5f2;
  font-size:.95rem;
}

@keyframes heroVideoZoom{
  0%{ transform:scale(1.04) translate3d(0,0,0); }
  100%{ transform:scale(1.12) translate3d(0,-8px,0); }
}

@keyframes floatGlowOne{
  0%,100%{ transform:translate3d(0,0,0); opacity:.34; }
  50%{ transform:translate3d(16px, 18px, 0); opacity:.52; }
}

@keyframes floatGlowTwo{
  0%,100%{ transform:translate3d(0,0,0); opacity:.18; }
  50%{ transform:translate3d(-18px, -14px, 0); opacity:.34; }
}

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

@media (max-width: 980px){
  .hero-card.hero-card--video{
    min-height:auto;
  }
}

@media (max-width: 768px){
  .action-grid{
    grid-template-columns:1fr;
  }

  .status-strip{
    grid-template-columns:1fr;
  }

  .hero-card.hero-card--video{
    padding:1.15rem;
    border-radius:22px;
  }

  .action-card{
    min-height:82px;
    border-radius:18px;
  }

  .action-card i{
    width:50px;
    height:50px;
    flex-basis:50px;
    border-radius:15px;
  }
}

@media (prefers-reduced-motion: reduce){
  .hero-card-video,
  .hero-card-glow,
  .status-item,
  .action-card,
  .action-card::before{
    animation:none !important;
    transition:none !important;
  }

  html{
    scroll-behavior:auto;
  }
}