/* ── INDEX / HOME PAGE CSS ── */

/* HERO */
.hero{
  min-height:100vh;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:60px;
  padding:120px 80px 80px;
  background:var(--navy);
  position:relative;
  overflow:hidden;
}
.hero-bg-grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(0,201,167,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,201,167,.04) 1px,transparent 1px);
  background-size:60px 60px;
}
.hero-orb{
  position:absolute;border-radius:50%;
  filter:blur(80px);pointer-events:none;
}
.orb1{width:500px;height:500px;background:rgba(0,201,167,.1);top:-100px;right:-100px}
.orb2{width:300px;height:300px;background:rgba(245,200,66,.07);bottom:0;left:20%}
.orb3{width:200px;height:200px;background:rgba(0,201,167,.07);top:40%;left:-50px}

.hero-content{position:relative;z-index:2}
.hero-badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 16px;border-radius:100px;
  border:1px solid rgba(0,201,167,.35);
  background:rgba(0,201,167,.08);
  color:var(--teal);font-size:.8rem;font-weight:600;
  margin-bottom:24px;letter-spacing:.05em;
  animation:fadeUp .6s ease forwards;
}
.hero-title{
  color:var(--white);margin-bottom:20px;
  animation:fadeUp .6s .1s ease both;
}
.hero-sub{
  color:rgba(255,255,255,.6);
  font-size:1.1rem;max-width:480px;
  margin-bottom:36px;
  animation:fadeUp .6s .2s ease both;
}
.hero-ctas{
  display:flex;gap:16px;flex-wrap:wrap;
  margin-bottom:48px;
  animation:fadeUp .6s .3s ease both;
}
.hero-stats{
  display:flex;align-items:center;gap:24px;
  animation:fadeUp .6s .4s ease both;
}
.stat{display:flex;flex-direction:column;gap:2px}
.stat-num{
  font-family:var(--font-head);font-size:1.8rem;font-weight:800;
  color:var(--teal);
}
.stat-label{font-size:.75rem;color:rgba(255,255,255,.45);letter-spacing:.05em}
.stat-divider{width:1px;height:36px;background:rgba(255,255,255,.1)}

/* HERO VISUAL */
.hero-visual{
  position:relative;z-index:2;
  animation:fadeUp .6s .2s ease both;
}
.hero-card-cluster{
  position:relative;
  height:520px;
}
.hero-main-img{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:78%;
}
.img-overlay-text{
  position:absolute;bottom:20px;left:20px;
}
.ot-badge{
  background:var(--teal);color:var(--navy);
  padding:6px 14px;border-radius:100px;
  font-size:.78rem;font-weight:700;font-family:var(--font-head);
}

/* FLOATING CARDS */
.floating-card{
  position:absolute;
  display:flex;align-items:center;gap:10px;
  padding:12px 18px;border-radius:14px;
  background:rgba(15,42,61,.85);
  border:1px solid rgba(0,201,167,.2);
  backdrop-filter:blur(12px);
  color:var(--white);font-size:.82rem;font-weight:600;
  font-family:var(--font-head);
  box-shadow:0 8px 32px rgba(0,0,0,.3);
  z-index:3;white-space:nowrap;
}
.floating-card .card-icon{font-size:1.3rem}
.card-a{top:20px;left:-10px;animation:float 3.5s ease-in-out infinite}
.card-b{top:20px;right:0;animation:float 3.5s 1s ease-in-out infinite}
.card-c{bottom:60px;left:-10px;animation:float 3.5s .5s ease-in-out infinite}
.card-d{bottom:40px;right:10px;animation:float 3.5s 1.5s ease-in-out infinite}

@keyframes float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
}
@keyframes fadeUp{
  from{opacity:0;transform:translateY(24px)}
  to{opacity:1;transform:translateY(0)}
}

.scroll-hint{
  position:absolute;bottom:40px;left:80px;
  display:flex;align-items:center;gap:12px;
  color:rgba(255,255,255,.3);font-size:.75rem;
  letter-spacing:.1em;text-transform:uppercase;
}
.scroll-line{
  width:48px;height:1px;
  background:rgba(255,255,255,.2);
  position:relative;overflow:hidden;
}
.scroll-line::after{
  content:'';position:absolute;top:0;left:-100%;
  width:100%;height:100%;background:var(--teal);
  animation:scanline 2s linear infinite;
}
@keyframes scanline{to{left:100%}}

/* WHY US */
.why-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
}
.why-card{
  padding:32px 24px;border-radius:var(--radius);
  background:var(--off-white);
  border:1px solid rgba(0,201,167,.1);
  transition:transform var(--transition),box-shadow var(--transition);
}
.why-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.why-icon{font-size:2rem;margin-bottom:16px}
.why-card h3{margin-bottom:10px;color:var(--text)}
.why-card p{font-size:.9rem}

/* SERVICES GRID */
.services-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.service-tile{
  display:block;
  padding:32px 28px;border-radius:var(--radius);
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.07);
  position:relative;overflow:hidden;
  transition:background var(--transition),border-color var(--transition),transform var(--transition);
  color:inherit;
}
.service-tile:hover{
  background:rgba(0,201,167,.06);
  border-color:rgba(0,201,167,.3);
  transform:translateY(-4px);
}
.tile-num{
  font-family:var(--font-head);font-size:3rem;font-weight:800;
  color:rgba(0,201,167,.1);line-height:1;
  position:absolute;top:16px;right:20px;
}
.tile-icon{font-size:2rem;margin-bottom:12px}
.service-tile h3{color:var(--white);margin-bottom:8px}
.service-tile p{color:rgba(255,255,255,.5);font-size:.88rem}
.tile-arrow{
  display:block;margin-top:20px;color:var(--teal);
  font-size:1.2rem;
  transition:transform var(--transition);
}
.service-tile:hover .tile-arrow{transform:translateX(6px)}

/* PROMO SECTION */
.promo-layout{
  display:grid;
  grid-template-columns:1fr 1.5fr 1fr;
  grid-template-rows:auto auto;
  gap:24px;align-items:center;
}
.promo-float-card{
  padding:28px 24px;border-radius:var(--radius);
  background:var(--off-white);
  border:1px solid rgba(0,201,167,.12);
  transition:transform var(--transition),box-shadow var(--transition);
}
.float-1{grid-column:1;grid-row:1;animation:float 4s ease-in-out infinite}
.float-2{grid-column:3;grid-row:1;animation:float 4s 1s ease-in-out infinite}
.float-3{grid-column:1;grid-row:2;animation:float 4s .5s ease-in-out infinite}
.float-4{grid-column:3;grid-row:2;animation:float 4s 1.5s ease-in-out infinite}
.promo-main-img{grid-column:2;grid-row:1/3;position:relative}
.pfc-inner .pfc-emoji{font-size:2rem;display:block;margin-bottom:12px}
.pfc-inner h4{margin-bottom:8px;font-family:var(--font-head)}
.pfc-inner p{font-size:.88rem}
.promo-bubble{
  position:absolute;
  background:var(--teal);color:var(--navy);
  padding:8px 18px;border-radius:100px;
  font-size:.8rem;font-weight:700;font-family:var(--font-head);
  box-shadow:var(--shadow-teal);
}
.bubble-top{top:-16px;left:50%;transform:translateX(-50%)}
.bubble-bottom{bottom:-16px;right:20px}

/* TESTIMONIALS */
.testi-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
}
.testi-card{
  padding:32px;border-radius:var(--radius);
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  transition:background var(--transition);
}
.testi-card:hover{background:rgba(0,201,167,.06)}
.stars{color:var(--gold);font-size:1.1rem;margin-bottom:16px;letter-spacing:2px}
.testi-card p{color:rgba(255,255,255,.6);font-size:.92rem;line-height:1.7;margin-bottom:20px}
.testi-author{color:var(--teal);font-size:.82rem;font-weight:600}

/* RESPONSIVE */
@media(max-width:1100px){
  .hero{padding:120px 40px 80px;gap:40px}
  .why-grid{grid-template-columns:repeat(2,1fr)}
  .services-grid{grid-template-columns:repeat(2,1fr)}
  .testi-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:800px){
  .hero{grid-template-columns:1fr;padding:100px 24px 60px;text-align:center;min-height:auto}
  .hero-visual{display:none}
  .hero-stats{justify-content:center}
  .hero-ctas{justify-content:center}
  .scroll-hint{display:none}
  .promo-layout{grid-template-columns:1fr 1fr;grid-template-rows:auto}
  .promo-main-img{display:none}
  .float-1,.float-2,.float-3,.float-4{grid-column:auto;grid-row:auto}
}
@media(max-width:600px){
  .why-grid,.services-grid,.testi-grid{grid-template-columns:1fr}
  .promo-layout{grid-template-columns:1fr}
}