:root{
  --accent1: #0ea5ff;
  --accent2: #7c3aed;
  --glass: rgba(255,255,255,0.06);
  --glass-strong: rgba(255,255,255,0.12);
  --card-shadow: 0 10px 30px rgba(17,24,39,0.12);
  --bg: linear-gradient(120deg,#081229 0%, #071126 35%, #0f1b3a 100%);
  --glass-border: rgba(255,255,255,0.06);
  color-scheme: dark;
}

/* Reset */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family: 'Poppins', sans-serif;
  background: var(--bg);
  color: #e6eef8;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-y: auto;
  scroll-behavior: smooth;
}

/* Watermark logo (faded) */
body::before{
  content:"";
  position:fixed;
  inset:0;
  background-image: url('images/logo.png');
  background-repeat:no-repeat;
  background-position: 85% 15%;
  background-size: 40vmin;
  opacity: 0.03;
  z-index:0;
  pointer-events:none;
  filter: saturate(0) blur(0.5px);
}

/* NAVBAR */
.nav{
  position:fixed;
  width:100%;
  top:0;
  z-index:100;
  padding:18px 28px;
  display:flex;
  align-items:center;
  gap:18px;
  justify-content:space-between;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));
  border-bottom: 1px solid rgba(255,255,255,0.03);
  backdrop-filter: blur(6px) saturate(120%);
}
.nav .brand{ display:flex; align-items:center; gap:14px; }
.nav .brand img{ height:48px; width:auto; display:block; filter: drop-shadow(0 6px 20px rgba(124,58,237,0.12)); }
.nav .brand .title{ font-family: 'Montserrat', sans-serif; font-weight:700; font-size:18px; letter-spacing:0.6px; color:#fff; line-height:1; }
.nav .menu{ display:flex; gap:18px; align-items:center; }
.nav .menu a{ color:rgba(230,238,248,0.9); text-decoration:none; font-weight:600; font-size:14px; padding:8px 12px; border-radius:8px; transition:all .18s; }
.nav .menu a:hover{ transform:translateY(-3px); background: linear-gradient(90deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02)); }

/* Section base */
section{
  min-height: 100vh; /* full viewport height */
  padding: 70px 6%;   /* top padding for navbar */
  background: transparent; /* ensures continuous body bg */
  scroll-margin-top: 90px; /* for navbar offset on click */
  display: flex;
  flex-direction: column;
  justify-content: center;
}


/* HERO SECTION */
.hero{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  align-items:center;
  position:relative;
  z-index:1;
}

/* Left hero card */
.hero-left{
  transform: skewY(-6deg);
  background: linear-gradient(120deg, rgba(124,58,237,0.12), rgba(14,165,255,0.08));
  padding:60px;
  border-radius:22px;
  box-shadow: var(--card-shadow);
  border:1px solid rgba(255,255,255,0.03);
  max-width:600px;
  margin: 50px auto 0;
  box-sizing:border-box;
  transition: transform 0.3s, box-shadow 0.3s;
}
.hero-left:hover{ transform: translateY(-6px); box-shadow:0 18px 40px rgba(124,58,237,0.15); }
.hero-left .kicker{
  display:inline-block;
  padding:6px 12px;
  border-radius:999px;
  background: linear-gradient(90deg,var(--accent1),var(--accent2));
  color:white; font-weight:700; font-size:12px;
  box-shadow: 0 6px 20px rgba(12,12,40,0.08);
  transform: translateY(-6px);
}
.hero-left h1{ margin-top:18px; font-size:44px; color:white; line-height:1.02; font-family:'Montserrat',sans-serif; letter-spacing:-0.6px; }
.hero-left p{ margin-top:16px; color: rgba(230,238,248,0.9); font-size:16px; max-width:58ch; }
.hero-left .actions{ margin-top:24px; display:flex; gap:12px; flex-wrap:wrap; }
.btn-primary{
  padding:12px 18px; border-radius:12px; border:none; cursor:pointer;
  background: linear-gradient(90deg,var(--accent2),var(--accent1));
  color:white; font-weight:700; box-shadow:0 10px 30px rgba(14,165,255,0.08);
  transition: transform .18s, box-shadow .18s;
}
.btn-primary:hover{ transform:translateY(-4px); box-shadow:0 18px 40px rgba(124,58,237,0.15); }
.btn-ghost{
  padding:12px 18px; border-radius:12px; border:1px solid rgba(255,255,255,0.05);
  color:rgba(230,238,248,0.95); background:transparent; font-weight:700;
}

/* Right hero visuals */
.hero-right{
  display:flex; gap:18px; justify-content:center; align-items:center; position:relative; padding-left:40px; flex-wrap:wrap;
}
.hero-right .glass{
  flex:1 1 260px;
  max-width:320px;
  margin:12px auto;
  width:260px; height:140px;
  border-radius:16px; padding:14px;
  background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border:1px solid rgba(255,255,255,0.04);
  backdrop-filter: blur(8px) saturate(120%);
  box-shadow: var(--card-shadow);
  color:#eaf6ff;
}
/* G1 floats up first */
@keyframes floatyG1 {
  0%   { transform: rotate(-8deg) translateY(0px); }
  25%  { transform: rotate(-6deg) translateY(-6px); }
  50%  { transform: rotate(-10deg) translateY(6px); }
  75%  { transform: rotate(-7deg) translateY(-3px); }
  100% { transform: rotate(-8deg) translateY(0px); }
}
.g1 { animation: floatyG1 9s ease-in-out infinite; }

/* G2 floats opposite to G1 */
@keyframes floatyG2 {
  0%   { transform: rotate(6deg) translateY(0px); }
  25%  { transform: rotate(4deg) translateY(6px); }   /* opposite */
  50%  { transform: rotate(8deg) translateY(-6px); }  /* opposite */
  75%  { transform: rotate(5deg) translateY(3px); }   /* opposite */
  100% { transform: rotate(6deg) translateY(0px); }
}
.g2 { animation: floatyG2 7s ease-in-out infinite 0.9s; }

/* G3 floats opposite to G1 */
@keyframes floatyG3 {
  0%   { transform: rotate(-6deg) translateY(0px); }
  25%  { transform: rotate(-4deg) translateY(4px); }   /* opposite */
  50%  { transform: rotate(-8deg) translateY(-5px); }  /* opposite */
  75%  { transform: rotate(-5deg) translateY(3px); }   /* opposite */
  100% { transform: rotate(-6deg) translateY(0px); }
}
.g3 { animation: floatyG3 8s ease-in-out infinite 0.6s; }

.glass h4{ font-size:16px; color:white; margin-bottom:8px; }
.glass p{ font-size:13px; color:rgba(230,238,248,0.85); }

/* Other sections (Team, About, Clients, Timeline) maintain same design */
.Team-grid,
.clients-grid,
.timeline { margin-top:18px; gap:20px; display:grid; grid-template-columns:repeat(3,1fr); }
.job,.client,.step{ background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border-radius:14px; padding:18px; border:1px solid rgba(255,255,255,0.03); box-shadow: var(--card-shadow); }
.job:hover{ transform: translateY(-8px); box-shadow:0 20px 40px rgba(2,6,23,0.6); }
.job h3,.client h4,.step h5{ color:white; margin-bottom:8px; font-size:18px; }
.job p,.client p,.step p{ color:rgba(230,238,248,0.85); font-size:14px; }

/* Modal */
.modal-wrap{ position:fixed; left:0; right:0; bottom:-120%; height:60vh; background: linear-gradient(180deg, #07102a 0%, #0b1530 100%); border-top-left-radius:18px;border-top-right-radius:18px;padding:22px; box-shadow: 0 -30px 80px rgba(0,0,0,0.6); transition: bottom .42s cubic-bezier(.2,.9,.3,1); z-index:120; }
.modal-wrap.active{ bottom:0; }
.modal-content{ display:flex; gap:18px; height:100%; align-items:flex-start; overflow:auto; }
.modal-left{ flex:0 0 40%; background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); padding:16px;border-radius:12px; height:100%; }
.modal-right{ flex:1; padding:12px; height:100%; }
.close-modal{ position:absolute; right:18px; top:14px; color:rgba(255,255,255,0.7); font-weight:700; cursor:pointer; }

/* Animations */
@keyframes floaty { 0%{transform:translateY(0)} 50%{transform:translateY(-8px)} 100%{transform:translateY(0)} }

/* Media Queries */
@media (max-width:1100px){
  .hero{ grid-template-columns:1fr; padding:48px 6%; }
  .hero-right{ padding-left:0; justify-content:flex-start; }
  .Team-grid, .clients-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:1024px){
    .hero-left{
    max-width: 500px;
    padding: 60px;
    margin-top: 40px;
  }
  .hero-right .glass{ width:80%; height:auto; }
}
@media (max-width:768px){
   .hero-left{
    transform: skewY(0deg);
    max-width: 90%;
    padding: 25px;
    margin-top: 30px;
  }
  .hero{ grid-template-columns:1fr; padding:40px 6%; gap:30px; }
  .hero-right{ padding-left:0; justify-content:center; }
  .hero-right .glass{ width:90%; max-width:300px; }
  .timeline{ flex-direction:column; gap:18px; }
  .step{ width:100%; min-width:unset; }
}
@media (max-width:700px){
  .nav .menu{ display:none; }
  .Team-grid, .clients-grid{ grid-template-columns:1fr; gap:12px; }
  .modal-left{ display:none; }
  .modal-right{ flex:1 1 100%; }
}