:root{
  --bg: #06131f;
  --glass: rgba(255,255,255,.10);
  --glass-border: rgba(255,255,255,.22);
  --text: #eef6ff;
  --muted: rgba(238,246,255,.78);
  --accent: #7ee7ff;
  --accent2: #b68cff;
  --rainbow1: #ff6b6b;
  --rainbow2: #ffd93d;
  --rainbow3: #6bff95;
  --rainbow4: #6bbcff;
  --rainbow5: #c26bff;
  --shadow: 0 18px 50px rgba(0,0,0,.35);
  --radius: 24px;
  --max: 1180px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  min-height:100vh;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at top, rgba(126,231,255,.16), transparent 30%),
    linear-gradient(180deg, #04101a 0%, #0a2032 52%, #08131e 100%);
  overflow-x:hidden;
}

.sea-background{
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 15%, rgba(255,255,255,.10), transparent 18%),
    radial-gradient(circle at 20% 80%, rgba(102,214,255,.10), transparent 18%),
    radial-gradient(circle at 80% 70%, rgba(255,255,255,.07), transparent 18%);
  animation: drift 14s ease-in-out infinite alternate;
}
.sea-background::before,
.sea-background::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:48vh;
  background:
    linear-gradient(180deg, rgba(95,205,255,.04), rgba(95,205,255,.16)),
    repeating-linear-gradient(
      -8deg,
      rgba(255,255,255,.06) 0 12px,
      rgba(126,231,255,.12) 12px 24px
    );
  opacity:.55;
}
.sea-background::before{
  clip-path: polygon(0 55%, 8% 50%, 16% 58%, 25% 52%, 36% 60%, 47% 52%, 58% 61%, 69% 50%, 79% 59%, 90% 53%, 100% 60%, 100% 100%, 0 100%);
  animation: wave1 10s linear infinite;
}
.sea-background::after{
  height:42vh;
  opacity:.35;
  clip-path: polygon(0 62%, 10% 68%, 20% 58%, 31% 67%, 43% 60%, 54% 70%, 67% 59%, 79% 68%, 89% 61%, 100% 69%, 100% 100%, 0 100%);
  animation: wave2 14s linear infinite;
}

.site-header{
  position:sticky;
  top:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:1rem 1.25rem;
  backdrop-filter: blur(18px);
  background: rgba(6,19,31,.46);
  border-bottom:1px solid rgba(255,255,255,.12);
}

.brand{
  display:flex;
  align-items:center;
  gap:.75rem;
  color:var(--text);
  text-decoration:none;
  font-weight:700;
  letter-spacing:.02em;
  min-width:0;
}

.logo{
  width:54px;
  height:54px;
  flex:0 0 auto;
}

.site-nav{
  display:flex;
  flex-wrap:wrap;
  gap:.65rem;
  align-items:center;
  justify-content:flex-end;
}

.site-nav a{
  color:var(--text);
  text-decoration:none;
  padding:.6rem .9rem;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  transition:.25s ease;
  white-space:nowrap;
}
.site-nav a:hover{
  background:rgba(255,255,255,.14);
  box-shadow:0 0 0 1px rgba(126,231,255,.25) inset;
}

.menu-toggle{
  display:none;
  border:0;
  color:var(--text);
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  border-radius:14px;
  padding:.7rem .95rem;
  font-size:1.1rem;
  line-height:1;
  cursor:pointer;
  flex:0 0 auto;
}

.page{
  width:min(var(--max), calc(100% - 2rem));
  margin:0 auto;
  padding:2rem 0 4rem;
}

.glass-panel{
  background:var(--glass);
  border:1px solid var(--glass-border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  backdrop-filter: blur(18px);
  padding:1.5rem;
  margin-bottom:1.25rem;
  position:relative;
  overflow:hidden;
}
.glass-panel::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(135deg, rgba(255,255,255,.14), transparent 28%, transparent 72%, rgba(255,255,255,.06));
  pointer-events:none;
}

.hero{
  padding:clamp(1.5rem, 3vw, 2.5rem);
}

.hero h1,
.glass-panel h1,
.glass-panel h2{
  margin-top:0;
}

.hero-actions,
.contact-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:.85rem;
  margin-top:1.25rem;
}

.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.85rem 1.2rem;
  border-radius:999px;
  text-decoration:none;
  color:var(--text);
  border:1px solid rgba(255,255,255,.16);
  transition:.25s ease;
}
.button.primary{
  background:linear-gradient(135deg, rgba(126,231,255,.35), rgba(182,140,255,.30));
}
.button.secondary{
  background:rgba(255,255,255,.08);
}
.button:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 26px rgba(0,0,0,.22);
}

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

p{
  color:var(--muted);
  line-height:1.7;
}

.profile-layout{
  display:grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap:1.5rem;
  align-items:start;
}

.profile-image img{
  width:100%;
  height:auto;
  display:block;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 16px 36px rgba(0,0,0,.28);
  object-fit:cover;
}

.profile-text h1{
  margin-top:0;
}

@keyframes drift{
  from{transform:translateY(0)}
  to{transform:translateY(-12px)}
}
@keyframes wave1{
  from{transform:translateX(0)}
  to{transform:translateX(-6%)}
}
@keyframes wave2{
  from{transform:translateX(0)}
  to{transform:translateX(8%)}
}

@media (max-width: 900px){
  .glass-grid{grid-template-columns:1fr}

  .menu-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }

  .site-header{
    position:sticky;
  }

  .site-nav{
    display:none;
    position:absolute;
    top:100%;
    left:1rem;
    right:1rem;
    z-index:60;
    flex-direction:column;
    align-items:stretch;
    padding:1rem;
    background:rgba(6,19,31,.96);
    border:1px solid rgba(255,255,255,.12);
    border-radius:20px;
    backdrop-filter: blur(18px);
    box-shadow:var(--shadow);
  }
  .site-nav.open{display:flex}
  .site-nav a{text-align:center; width:100%}
}

@media (max-width: 800px){
  .profile-layout{
    grid-template-columns:1fr;
  }
}

@media (max-width: 600px){
  .site-header{
    padding: .9rem 1rem;
  }
  .brand span{
    font-size:.95rem;
  }
  .logo{
    width:46px;
    height:46px;
  }
  .page{
    width:min(var(--max), calc(100% - 1rem));
  }
  .glass-panel{
    padding:1.1rem;
  }
}