@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

html, body{
  height:100%;
  max-width:100%;
  overflow-x:hidden;
}

*{
  box-sizing:border-box;
}

/* Header */

.topbar{
  position:fixed;
  top:40px;
  left:60px;
  right:60px;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  z-index:20;
}

.brand{
  display:flex;
  align-items:flex-start;
  gap:18px;
}

.logo{
  width:44px;
  height:44px;
  border-radius:12px;
  display:grid;
  place-items:center;
  font-weight:600;
  font-size:1rem;
  background:transparent;
  border:1px solid var(--line);
}

.brand strong{
  display:block;
  font-size:1.25rem;
  font-weight:600;
  letter-spacing:-.01em;
}

.brand span{
  display:block;
  font-size:.95rem;
  color:var(--muted);
  margin-top:4px;
}

.actions{
  display:flex;
  gap:14px;
  align-items:center;
}

:root{
  --bg:#f7f8fb;
  --fg:#111827;
  --muted:#6b7280;
  --line:rgba(17,24,39,.08);

  --accent:#2563eb;
  --accent-soft:rgba(37,99,235,.12);

  --glass:rgba(255,255,255,.7);
  --shadow:0 20px 60px rgba(37,99,235,.12);

  --ease:cubic-bezier(.25,.1,.25,1);
}

body{
  font-family:'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:var(--bg);
  color:var(--fg);
  -webkit-font-smoothing:antialiased;
}

/* Stage */

/* Hero Title */

.hero-title{
  position:fixed;
  top:140px;
  left:0;
  right:0;
  text-align:center;
  pointer-events:none;
}

.hero-title h1{
  font-size:clamp(2.8rem,4vw,4.5rem);
  font-weight:700;
  letter-spacing:-.04em;
  background:linear-gradient(90deg, var(--fg), var(--accent));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.stage{
  display:flex;
  min-height:100vh;
  padding:0 60px;
  position:relative;
  z-index:1;
  width:100%;
  max-width:100%;
}

/* Portals */

.portal{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  color:var(--fg);
  transition:opacity .4s var(--ease),transform .4s var(--ease), background .4s var(--ease);
  position:relative;
}

.portal:hover{
  background:var(--accent-soft);
}

.stage:hover .portal:not(:hover){
  opacity:.4;
}

.portal-content{
  text-align:center;
  transition:transform .4s var(--ease);
}

.portal:hover .portal-content{
  transform:translateY(-6px);
}

.portal h2{
  font-size:clamp(2.4rem,3vw,3.5rem);
  font-weight:600;
  letter-spacing:-.03em;
  margin-bottom:12px;
}

.portal p{
  font-size:1.1rem;
  color:var(--muted);
}

/* Portal Button */

.portal-btn{
  display:inline-block;
  margin-top:28px;
  padding:12px 26px;
  border-radius:999px;
  border:1px solid var(--line);
  background:transparent;
  color:var(--fg);
  font-size:.95rem;
  font-weight:500;
  letter-spacing:.02em;
  transition:all .3s var(--ease);
}

.portal:hover .portal-btn{
  background:var(--accent);
  color:white;
  transform:translateY(-2px);
}

.portal-btn::after{
  content:" →";
  transition:transform .3s var(--ease);
}

.portal:hover .portal-btn::after{
  transform:translateX(4px);
}

/* Subtle divider lines */

.portal + .portal{
  border-left:1px solid var(--line);
}

/* Footer */

.footer{
  position:fixed;
  bottom:40px;
  left:60px;
  right:60px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:.95rem;
  color:var(--muted);
  z-index:20;
}

.linkedin-btn{
  display:inline-block;
  padding:10px 18px;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--glass);
  backdrop-filter:blur(20px);
  color:var(--fg);
  text-decoration:none;
  font-weight:500;
  cursor:pointer;
  transition:background .3s var(--ease),
             color .3s var(--ease),
             transform .25s var(--ease),
             box-shadow .3s var(--ease);
}

.linkedin-btn:hover{
  background:var(--fg);
  color:var(--bg);
  transform:translateY(-3px);
  box-shadow:0 10px 30px rgba(0,0,0,.12);
}

.linkedin-btn:active{
  transform:translateY(0);
  box-shadow:none;
}

.online-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#34c759;
  display:inline-block;
  margin-right:8px;
}

/* Mobile */
@media(max-width:980px){

  .hero-title{
    position:relative;
    top:auto;
    margin:120px 0 40px 0;
  }

  body{
    overflow:auto;
  }

  .stage{
    flex-direction:column;
    padding:0 30px;
    width:100%;
    max-width:100%;
  }

  .portal{
    height:auto;
    padding:60px 0;
  }

  /* REMOVE vertical divider on mobile */
  .portal + .portal{
    border-left:none;
  }

  .stage:hover .portal:not(:hover){
    opacity:1;
  }

  /* Footer centered vertical layout */
  .footer{
    position:relative;
    left:0;
    right:0;
    margin:80px 0 40px 0;
    padding:0 30px;
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:16px;
    text-align:center;
    box-sizing:border-box;
  }

  
  .footer > div{
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
  }

  .footer span{
    display:inline-flex;
    align-items:center;
    gap:8px;
  }

  .footer a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }

  .topbar{
    left:30px;
    right:30px;
  }
}

/* Reduced motion */

@media(prefers-reduced-motion:reduce){
  *{
    animation:none !important;
    transition:none !important;
  }
}